如何在Nightmare.js中找到.click的选择器？

Question

我试图使用Nightmare.js自动抓取一些网页。我是一个系统管理员，我对Node.js或CSS不是很了解。

我已经能够让Nightmare输入并点击几个按钮让我登录 - 我通过使用Chrome开发工具Inspect找到了选择器。不幸的是，Nightmare需要什么，或者我认为它需要什么，是不是可以粘贴？例如，我正在使用的登录用户名框，这是在梦魇中的作用：

.insert('input#username.form-control', 'username')

在Chrome开发工具中，在元素中，它是悬停在GUI元素上的，并且是＆＃34;属性＆＃34;中的第一行，但是如果我＆＃34;复制选择器＆＃34; ，我得到

#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可以使用的内容？我有点出海了。

就像我说的那样，通过手动复制＆＃34;属性＆＃34;中的第一件事，我得到了那个，但为什么我不能从Chrome开发工具中复制那些东西？显然，Chrome和Nightmare对选择器的含义有不同的看法，我甚至不知道如何开始调和它们。当我尝试搜索CSS Selector和Node.js时，我发现建议使用来自Github的更多东西，比如Cheerio.js（我还没有这样做），而不是对我实际做错的事情有所了解。< / p>

什么不起作用的具体例子：我有一个我无法点击的按钮。 复制元素：

<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')无法工作，显然是因为其中有空格。

尝试.click('button[tabindex="0"]')使＆＃34;无法通过选择器＆＃34;找到元素。

尝试.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')也无法找到该元素。

Answer 1

感谢您的背景，但我相信您的问题可以简化为询问可以使用哪些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_"]')。这里的缺点是，这个类没有什么独特之处，这意味着所有具有此类的*元素都会将click事件应用于它们。

请注意，此元素包含多个属性，这意味着此处有许多选项。但是，要知道根据您定位的属性，DOM中的其他元素可能是具有相同属性的其他元素，因此这里的关键是找到一些独特的东西。大多数情况下，我们可以将ID应用于元素，只要ID在DOM中是唯一的，您只需使用$('#YourUniqueId')来访问该特定元素而不使用其他元素。

有关您在帖子中放置的内容不正确的一件事是，您尝试使用元素文本作为ID（例如.click('button#Policy Tester')）来访问该元素。元素文本不是它的ID。

以下是一些链接，可能会帮助那些需要在选择器上提供可靠参考的人：

• Attribute Selectors
• CSS Reference

修订更新

稍微研究过Nightmare.js，请尝试click('button.dpl-button___jGBcY')找到元素。

Answer 2

有很多方法可以获得正确的选择器。使用检查元素等。

方式1

＆＃34;复制选择器＆＃34;从＆＃34;检查元素＆＃34;，大部分时间它都可以工作。您无法复制该元素，而是复制选择器

方式2

这是一种在chrome中执行此操作的简单方法。

• 安装SelectorGadget
• 然后在你想要抓取的任何页面上，打开selectorgadget并选择元素。
• 你有你需要的元素选择器。
• 使用它。