使用 Puppeteer 选择名称中带有点或句号的节点

Question

我们有一个包含很多元素的表单，唯一的唯一标识符是 name 属性，它始终采用 company.something

的形式

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

以下两种选择此文本输入的尝试均失败

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)

出现以下错误

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

有没有一种方法可以在不重写前端的情况下处理名称属性中有点或句号的元素？谢谢

Answer 1

搜索错误消息后，我发现 Cannot use query selector with id's that includes "." 双重转义有效。

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

Answer 2

因为这是在属性选择器中，所以您不需要满足于双重转义 — 引用属性值是不太容易出错的解决方案：

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

使用 Puppeteer 选择名称中带有点或句号的节点

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

css-selectors

puppeteer