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

Question

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?

score 2 · Answer 1 · answered Oct 28 '19 at 07:52

2

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.

answered Oct 28 '19 at 07:52

Ron

3,975
17
80
130

1

Oh my, it ran the app and I thought it was the test app. Thanks! The bounty is still locked, i'll award you once it opens – Asaf David Oct 28 '19 at 09:21

score 1 · Answer 2 · answered Oct 28 '19 at 09:18

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' })
    }
})

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

2 Answers2