javascript - 展开按钮直到状态改变

Question

我使用自动化测试工具(selenium)

我尝试测试一个有这个按钮的页面:

<button morearea-controllers="my-list" morearea-expanded="false" class="lpw-reach-text-more link">

作为用户，当我按下显示更多时，它会显示“显示更多内容”。当没有更多可显示时，morearea-expanded 变为 true。

是否有任何 JavaScript 命令可以扩展按钮直到结束 (直到 morearea-expanded 变为真)？

我尝试了一些非常笼统的东西，因为我发现它来 self 找到的完整按钮列表，然后是按钮的数量(但这个数字在我尝试测试的每个页面中都不相同):

document.querySelectorAll('button')

这是:

document.getElementsByTagName('button')[29].click()

Answer 1

您可以在 while 循环中不断调用 click 事件，直到属性值为“true”。使用 jQuery 的示例(名为 automationFunction() 的函数):

$(document).ready(function() {
  var count = 0,
      $button = $("[morearea-controllers='my-list']");

  /* bad code alert - just for sample purpose */
  $button.click(function() {

    if (count == 5) {
      return;
    } else {
      if (count === 4) {
        $(this).attr("morearea-expanded", true);
         $(this).val("Show Less");
      }
      $("#container").append((count + 1) + "<br/>");
      count++;
    }
  });

  /* automation function */
  $("#btn-automate").click(function() {
    automationFunction();
  });


  var automationFunction = function() {
    count = 0;

    while ($button.attr("morearea-expanded") === "false") {
      $button.click();
    }
  };

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
  Five items hidden..click on show more to unhide
  <div id="container"></div>
</div>

<input type="button" id="btn-show-more" morearea-controllers="my-list" morearea-expanded="false" class="lpw-reach-text-more link" value="Show More"> <br/>

<input type="button" id="btn-automate" value="Invoke automation function">