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

Question

I have been successfully developing integration tests with Puppeteer for a Nodejs with Reactjs application, but I have run into an issue where I want to test typing in different inputs.

I have an input for the title, another for the subject, email body and email recipient, but they are all inputs with no class tied to them, instead they have a name tied to them like so:

<input name="title"...

<input name="subject"...

<input name="body"...

and so on.

Can I capture that name attribute and if so, what is the syntax for it so that I can test typing into these inputs.

This is my test thus far:

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

As you can see I successfully availed myself of form element and classes for invalid inputs, but now I need to be able to differentiate between the input types in order to successfully complete the correct typing of the input elements, this by itself await page.type('input', 'My Title') I do not think will work. How will Puppeteer know which input type I am referring to?

Answer 1

You can treat the name as an attribute. And use a CSS Selector using that attribute to match the input.

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