如何找到选择器，for .click in Nightmare.js？
How do I find the selector, for .click in Nightmare.js?
我正在尝试使用 Nightmare.js 自动抓取网页。我是一名系统管理员，我对 Node.js 或 CSS 不是很了解。
我已经能够让 Nightmare 输入并单击几个按钮让我登录 - 我通过使用 Chrome 开发工具 Inspect 找到了选择器。不幸的是，Nightmare 需要的，或者我认为它需要的，不是可粘贴的？例如，我正在使用的登录用户名框，这是在 Nightmare 中起作用的：
.insert('input#username.form-control', 'username')
在 Chrome Dev Tools 中，在 Elements 中，这是悬停在 GUI 元素上的内容，并且是 "Properties" 中的第一行，但是如果我 "Copy selector"，我会得到
#username
复制 Xpath：
//*[@id="username"]
复制元素：
<input class="form-control" type="text" cols="60" placeholder="Email (or username)" required="" name="username" id="username" value="" autocorrect="off" autocapitalize="off" autocomplete="off" background-repeat: no-repeat; background-attachment: scroll; background-size: 16px 18px; background-position: 98% 50%; cursor: auto;">
我如何将其中任何一个翻译成 Nightmare.js 可以使用的内容？我有点出海了。
就像我说的，我通过手动复制 "Properties" 中的第一个东西来让那个工作，但为什么我不能从 Chrome Dev Tools 中复制那个东西？显然，Chrome 和 Nightmare 对什么是选择器有不同的看法，我什至不知道如何开始调和它们。当我尝试搜索 CSS Selector 和 Node.js 时，我发现建议使用 Github 中的更多内容，例如 Cheerio.js（我还没有这样做），而不是透露任何信息关于我实际上做错了什么。
无法正常工作的具体示例：我有一个无法点击的按钮。
复制元素：
<button tabindex="0" role="button" aria-disabled="false" class="dpl-button___jGBcY button-tertiary-colors button-font-size button-font-weight button-line-height button-text-transform font-family-primary button-pad button-shadow border-radius-button">Policy Tester</button>
我正在根据我在这里和 Google 上的发现尝试不同的方法，但没有取得进展。我显然遗漏了一些东西。
尝试 .click('button#Policy Tester') 是行不通的，显然是因为其中有一个 space。
尝试 .click('button[tabindex="0"]') 得到 "unable to find element by selector"。
尝试.click('button.dpl-button___jGBcY.button-tertiary-colors.button-font-size.button-font-weight.button-line-height.button-text-transform.font-family-primary.button-pad.button-shadow.border-radius-button')也是找不到元素。
谢谢你的背景，但我相信你的问题可以浓缩为询问什么 jQuery 选择器可以用来访问 <button tabindex="0" role="button" aria-disabled="false" class="dpl-button___jGBcY button-tertiary-colors button-font-size button-font-weight button-line-height button-text-transform font-family-primary button-pad button-shadow border-radius-button">Policy Tester</button>.
这将访问元素 $('button[class^="dpl-button_"]')。这里的缺点是此 class 没有任何独特之处，这意味着所有*具有此 class 的元素都将应用您的点击事件。
请注意，此元素包含多个属性，这意味着此处有多个选项。但是，请注意，根据您定位的属性，DOM 中的其他元素很可能具有相同的属性，因此这里的关键是找到独特的东西。大多数时候，我们可以将 ID 应用于元素，只要 ID 在 DOM 中是唯一的，您就可以简单地使用 $('#YourUniqueId') 来访问该特定元素，而不能访问其他元素。
关于您在 post 中输入的不正确内容，需要注意的一件事是您试图通过使用元素文本作为 ID（例如，.click('button#Policy Tester')）来访问该元素。元素文本不是它的 ID。
这里有几个链接可能会帮助那些需要可靠参考的选择器：
修订更新
研究了Nightmare.js一点，请尝试click('button.dpl-button___jGBcY')找到元素。
有很多方法可以获得合适的选择器。使用检查元素等。
方式一
"copy selector" 来自 "inspect element"，大部分时间都可以。你不复制元素，你复制 selector
方式 2
这是 chrome 中的一种简单方法。
- 安装SelectorGadget
- 然后在您要抓取的任何页面上，打开 selectorgadget 并选择元素。
- 你已经得到了你需要的元素选择器。
- 使用它。
我正在尝试使用 Nightmare.js 自动抓取网页。我是一名系统管理员，我对 Node.js 或 CSS 不是很了解。
我已经能够让 Nightmare 输入并单击几个按钮让我登录 - 我通过使用 Chrome 开发工具 Inspect 找到了选择器。不幸的是，Nightmare 需要的，或者我认为它需要的，不是可粘贴的？例如，我正在使用的登录用户名框，这是在 Nightmare 中起作用的：
.insert('input#username.form-control', 'username')
在 Chrome Dev Tools 中，在 Elements 中，这是悬停在 GUI 元素上的内容，并且是 "Properties" 中的第一行，但是如果我 "Copy selector"，我会得到
#username
复制 Xpath：
//*[@id="username"]
复制元素：
<input class="form-control" type="text" cols="60" placeholder="Email (or username)" required="" name="username" id="username" value="" autocorrect="off" autocapitalize="off" autocomplete="off" background-repeat: no-repeat; background-attachment: scroll; background-size: 16px 18px; background-position: 98% 50%; cursor: auto;">
我如何将其中任何一个翻译成 Nightmare.js 可以使用的内容？我有点出海了。
就像我说的，我通过手动复制 "Properties" 中的第一个东西来让那个工作，但为什么我不能从 Chrome Dev Tools 中复制那个东西？显然，Chrome 和 Nightmare 对什么是选择器有不同的看法，我什至不知道如何开始调和它们。当我尝试搜索 CSS Selector 和 Node.js 时，我发现建议使用 Github 中的更多内容，例如 Cheerio.js（我还没有这样做），而不是透露任何信息关于我实际上做错了什么。
无法正常工作的具体示例：我有一个无法点击的按钮。 复制元素：
<button tabindex="0" role="button" aria-disabled="false" class="dpl-button___jGBcY button-tertiary-colors button-font-size button-font-weight button-line-height button-text-transform font-family-primary button-pad button-shadow border-radius-button">Policy Tester</button>
我正在根据我在这里和 Google 上的发现尝试不同的方法，但没有取得进展。我显然遗漏了一些东西。
尝试 .click('button#Policy Tester') 是行不通的，显然是因为其中有一个 space。
尝试 .click('button[tabindex="0"]') 得到 "unable to find element by selector"。
尝试.click('button.dpl-button___jGBcY.button-tertiary-colors.button-font-size.button-font-weight.button-line-height.button-text-transform.font-family-primary.button-pad.button-shadow.border-radius-button')也是找不到元素。
谢谢你的背景，但我相信你的问题可以浓缩为询问什么 jQuery 选择器可以用来访问 <button tabindex="0" role="button" aria-disabled="false" class="dpl-button___jGBcY button-tertiary-colors button-font-size button-font-weight button-line-height button-text-transform font-family-primary button-pad button-shadow border-radius-button">Policy Tester</button>.
这将访问元素 $('button[class^="dpl-button_"]')。这里的缺点是此 class 没有任何独特之处，这意味着所有*具有此 class 的元素都将应用您的点击事件。
请注意，此元素包含多个属性，这意味着此处有多个选项。但是，请注意，根据您定位的属性，DOM 中的其他元素很可能具有相同的属性，因此这里的关键是找到独特的东西。大多数时候，我们可以将 ID 应用于元素，只要 ID 在 DOM 中是唯一的，您就可以简单地使用 $('#YourUniqueId') 来访问该特定元素，而不能访问其他元素。
关于您在 post 中输入的不正确内容，需要注意的一件事是您试图通过使用元素文本作为 ID（例如，.click('button#Policy Tester')）来访问该元素。元素文本不是它的 ID。
这里有几个链接可能会帮助那些需要可靠参考的选择器：
修订更新
研究了Nightmare.js一点，请尝试click('button.dpl-button___jGBcY')找到元素。
有很多方法可以获得合适的选择器。使用检查元素等。
方式一
"copy selector" 来自 "inspect element"，大部分时间都可以。你不复制元素，你复制 selector
方式 2
这是 chrome 中的一种简单方法。
- 安装SelectorGadget
- 然后在您要抓取的任何页面上，打开 selectorgadget 并选择元素。
- 你已经得到了你需要的元素选择器。
- 使用它。