Selecting a node with a dot or fullstop in the name with Puppeteer

Question

We've a form with a lot of elements in it like this, with the only unique identifier being the name attribute which is always of the form company.something

<input class="form-control" type="text" name="company.name" value="">

Both of the following attempts at selecting this text input fail

await page_c.click('input[name=company.name]')
await page_c.type('input[name=company.name]', client.companyName)

await page_c.click('input[name=company\.name]')
await page_c.type('input[name=company\.name]', client.companyName)

with the following error

Evaluation failed: DOMException: Failed to execute 'querySelector' on 'Document': 'input[name=company.name]' is not a valid selector.

Is there a way to handle elements where the name attribute had a dot or full stop in it with out rewriting the front end please? Thanks.

Answer 1

After searching for the error message I found Cannot use query selector with id's that includes "." double escaping works.

await page_c.click('input[name=company\\.name]')
await page_c.type('input[name=company\\.name]', client.companyName)

Answer 2

As this is in an attribute selector, you don't need to settle for double escaping — quoting the attribute value is the less error-prone solution:

await page_c.click('input[name="company.name"]')
await page_c.type('input[name="company.name"]', client.companyName)