如何识别没有 class 的输入以使用 Puppeteer 进行测试？

Question

我已经成功地使用 Puppeteer 为带有 Reactjs 应用程序的 Nodejs 开发了集成测试，但是我运行遇到了一个问题，我想测试不同输入的输入。

我有一个标题输入，另一个主题输入，电子邮件 body 和电子邮件收件人，但它们都是没有 class 绑定的输入，而是绑定了名称对他们这样：

<input name="title"...

<input name="subject"...

<input name="body"...

等等。

我可以捕获那个 name 属性吗？如果可以，它的语法是什么，以便我可以测试输入这些输入。

这是我目前的测试：

describe('And using valid inputs', async () => {
    beforeEach(async () => {
      await page.type('input', 'My Title')

    })

    test('Submitting takes user to review screen', async () => {

    })

    test('Submitting then saving adds survey to index page', async () => {

    })
  })

  describe("And using invalid inputs", async () => {
    beforeEach(async () => {
      await page.click("form button.teal");
    });

    test("the form shows an error message", async () => {
      const inputError = await page.getContentsOf(".red-text");

      expect(inputError).toEqual("You must provide a value");
    });
  });

如您所见，我成功地利用了 form 元素和 classes 来处理无效输入，但现在我需要能够区分输入类型才能成功完成输入元素的正确输入，这本身 await page.type('input', 'My Title') 我认为不会起作用。 Puppeteer 如何知道我指的是哪种输入类型？

Answer 1

您可以将 name 视为属性。并使用 CSS Selector 使用该属性来匹配输入。

await page.type('INPUT[name=err_email]', 'My Title')

如何识别没有 class 的输入以使用 Puppeteer 进行测试？

How to identify an input without a class for testing with Puppeteer?

chromium

node.js

puppeteer