使用 React 的 Jest-Puppeteer 测试不会在输入中输入文本答案

【问题标题】：Jest-Puppeteer test with React doesn't type text in input使用 React 的 Jest-Puppeteer 测试不会在输入中输入文本
【发布时间】：2019-10-25 14:01:44
【问题描述】：

我有一个从“create-react-app”创建的应用程序，并且我添加了 puppeteer 来运行端到端测试。在尝试运行登录测试时，我无法在表单输入的登录中键入文本。

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$'
};

我的登录测试：

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

我也尝试过使用以下任何一种：

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

但是，它仍然没有输入任何文本。我想知道我的设置是否适合 create-react-app。知道如何解决这个问题吗？

【问题讨论】：

到底发生了什么？

标签： reactjs jestjs create-react-app puppeteer jest-puppeteer

【解决方案1】：

Puppeteer 默认无头运行，我相信它确实会运行，但在后台运行。

将以下行添加到您的 jest-puppeteer.config.js：

launch: {
    headless: false,
}

所以它看起来像这样：

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

这实际上会打开浏览器，您将能够看到发生了什么。

【讨论】：

天哪，它运行了应用程序，我认为它是测试应用程序。谢谢！赏金仍处于锁定状态，一旦打开，我会奖励你

【解决方案2】：

在继续之前，请检查您的应用并检查选择器是否错误或其他问题。不知何故，我更喜欢单独使用 puppeteer，然后再使用 Jest 之类的测试框架或任何你喜欢的东西，看看代码是否运行良好和流畅。

别忘了在开始测试时添加headless : false。

你可以试试这个。

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

【讨论】：