javascript - 卡斯珀JS : Selecting an option in dropdown menu made of and dynamic classes

Question

在这里经过多次尝试和搜索后，我无法帮助自己修复我的 CasperJS 脚本。

基本上，我正在抓取列出大量页面的网站的页面。成功登录后可以过滤主页(这部分完成)，然后，我想在下拉菜单中选择一个选项来过滤掉它们。这是下拉菜单的 HTML 代码:

<div class="sg-dropdown brn-filters__status js-filter-status js-status-toggle">
  <div class="sg-dropdown__icon"></div>
  <div class="sg-dropdown__hole sg-dropdown__hole--inactive">
    <div class="sg-dropdown__item-text sg-dropdown__item-text--active js-main-status"> Unanswered </div>
    </div>
  <div class="sg-dropdown__hole  sg-dropdown__hole--active">
    <div class="sg-dropdown__item-text sg-dropdown__item-text--active"> Select </div>
    </div>
  <div class="sg-dropdown__items js-status-list">
    <div class="sg-dropdown__item-hole  ">
      <div class="sg-dropdown__item-text"> All </div>
    </div>
    <div class="sg-dropdown__item-hole  chosen-status">
      <div class="sg-dropdown__item-text"> Unanswered </div>
    </div>
    <div class="sg-dropdown__item-hole  ">
      <div class="sg-dropdown__item-text"> Unresolved </div>
    </div>
    <div class="sg-dropdown__item-hole  ">
      <div class="sg-dropdown__item-text"> Resolved </div>
    </div>
  </div>
</div>

如何使用 CasperJS 在此下拉菜单中选择“已解决”？

我注意到的潜在线索:

• 默认情况下，应用过滤器“未答复”(.js-main-status我猜是这样定义的)。
• 可能无关紧要，但一旦我打开下拉菜单，第一个<div>将其类更改为 sg-dropdown brn-filters__status js-filter-status
js-status-toggle--opened
• 当我选择一个过滤器(比如说“已解决”)时，chosen-status添加到其 sg-dropdown__item-hole父类。关于这个，sg-dropdown__item-hole以双空格结束，最后一个被 chosen-status 取代单击该选项时。

我已经尝试了很多行代码，从一个简单的 .click()涉及 evaluate() 的更复杂代码块的方法, sendKeys (我之前用它来执行登录)，querySelector().selectedIndex , fetchText()使用 XPath 等等...

我的问题是我只需要处理 <div>，并且与此页面上的其他按钮重复出现具有在执行事件(单击、滚动等)后立即更改的近乎类的元素。

感谢您的帮助!

更新#1

我试过这些 LOC(基于此 thread ):

casper.then(function () {
if (this.exists('div.sg-dropdown.brn-filters__status.js-filter-status.js-status-toggle')) {
  this.click('div.sg-dropdown.brn-filters__status.js-filter-status.js-status-toggle');
  console.log('click dropdown');    
}
else {
  console.log('no click dropdown');
}
});

casper.wait(9000, function() {
  console.log('wait 9 seconds 1/2');
});

casper.then(function() {
if (this.exist('div.sg-dropdown.brn-filters__status.js-filter-status.js-status-toggle.sg-dropdown--opened > div.sg-dropdown__items.js-status-list > div:nth-child(4)')) {
  this.click('div.sg-dropdown.brn-filters__status.js-filter-status.js-status-toggle.sg-dropdown--opened > div.sg-dropdown__items.js-status-list > div:nth-child(4)');
  console.log('click Resolved');
}
else {
  console.log('no click Resolved');
}
})

casper.wait(9000, function() {
  this.capture('test.png');
  console.log('wait 9 seconds 2/2');
})

第一步似乎工作正常，我可以看到 wait 9 seconds 1/2控制台中提示的消息。但是，如果我捕获这一步，我将看不到打开的下拉菜单。

第二步就彻底失败了。我首先认为这是由于缺少 --opened在 sg-dropdown brn-filters__status js-filter-status js-status-toggle 的末尾类，但没有任何效果，因为我总是遇到同样的错误:

TypeError: undefined is not a constructor (evaluating 'this.exist')

在之前的一些测试中，我返回了值 undefined当我试图将“已解决”读入 <div> 时.我什至在控制台中几乎没有返回任何内容，例如空格、无错误和运行结束。

有人知道吗？ 🤔

更新#2

我刚刚添加了一个 if 条件来测试 sg-dropdown brn-filters__status js-filter-status js-status-toggle--opened类，点击下拉后似乎不存在。

所以第 1 步甚至都不起作用，现在我有点迷路了 😕

Answer 1

我最终找到了这个:https://github.com/casperjs/casperjs/issues/1390有几个指向 Stack Overflow 线程的链接，通常由 @Artjom-b 回答。

我似乎陷入了死胡同，因为 CasperJS 不提供从下拉列表中选择选项的 native 支持，但在我的情况下更糟，因为我没有 <select>也不<option> .我确信有一种方法可以更新类并因此重新加载页面，但它现在超出了我的范围。

无论如何，我找到了另一种访问我正在寻找的数据的方法，我现在正在研究如何更快地执行报废!