Asaf David
Asaf David

Reputation: 3297

Jest-Puppeteer test with React doesn't type text in input

I have an app created from "create-react-app", and i've added puppeteer for running end-to-end tests. While trying to run a test for logging in, I am not able to type text in the log in form inputs.

jest-puppeteer.config.js:

module.exports = {
  server: {
    command: `npm start`,
    port: 3000,
    launchTimeout: 10000,
    debug: true
  }
};

jest.config.js:

module.exports = {
  preset: 'jest-puppeteer',
  testRegex: './*\\index.test\\.js$'
};

my login test:

it('should login test user', async () => {
    await page.waitForSelector('form[name="login"]');
    await expect(page).toFillForm('form[name="login"]', {
      username: 'abcd',
      password: 'abcd'
    });
    await expect(page).toMatchElement('input[name="username"]', { text: 'abcd' });
  }

I also tried using any of the following:

await page.type('#username', 'abcd');

await page.click('input[name="username"]');
await page.type('input[name="username"]', 'abcd');

await expect(page).toFill('input[name="username"]', 'abcd');

But still, it doesn't type any text. I wonder if my setup is suitable for create-react-app. Any idea how to solve this?

Upvotes: 0

Views: 1051

Answers (2)

Edi Imanto
Edi Imanto

Reputation: 2509

Before going on, please check your app and check if the selectors are wrong or something. Somehow i prefer to use only puppeteer alone before using test framework like Jest or anything you like and see if the code running well and smoothly.

And don't forget to add headless : false for the beginning test.

You can try this one.

describe('Login', () => {
    beforeAll(async () => {
        await page.goto('https://localhost:3000');
    })

    it('should login test user', async () => {

        const waitForTheName = await page.waitForSelector('input[name="username"]');
        const focusInputName = await page.focus('input[name="username"]')
        const writeInputName = await page.keyboard.type('abcd')

        const focusInputPaswd = await page.focus('input[name="password"]')
        const writeInputPaswd = await page.keyboard.type('abcd')

        await expect(page).toFillForm('form[name="login"]', {
            username: 'abcd',
            password: 'abcd'
        })

        await expect(page).toMatchElement('input[name="username"]', { text: 'abcd' })
    }
})

Upvotes: 1

Ron
Ron

Reputation: 4095

Puppeteer is running headless by default, I believe it does run but in the background.

Add the following lines to your jest-puppeteer.config.js:

launch: {
    headless: false,
}

so it will look like that:

module.exports = {
  launch: {
        headless: false,
  },
  server: {
    command: `npm start`,
    port: 3000,
    launchTimeout: 10000,
    debug: true
  }
};

This will actually open the browser and you'll be able to see what's going on.

Upvotes: 2

Related Questions