赛普拉斯 - 在下拉菜单中选择一个选项

Question

尝试使用 bn.com 运行一个简单的测试来搜索一本书并首先按最低价格排序。在书店搜索“黑暗的左手”后，该下拉部分的 HTML 如下：

<div class="sort-by">
  <select name="sorter" id="sortProducts1" class="hidden selectBox" title="Sort by:" data-selectbox="" style="display: none;">
  <option value="/s/left+hand+of+darkness" selected="selected">Top Matches</option>
  <option value="/s/left+hand+of+darkness?Ns=P_Sales_Rank%7C0">Best Sellers</option>
  <option value="/s/left+hand+of+darkness?Ns=P_Publication_Date%7C1">Newest to Oldest</option>
  <option value="/s/left+hand+of+darkness?Ns=P_Publication_Date%7C0">Oldest to Newest</option>
  <option value="/s/left+hand+of+darkness?Ns=P_Sale_Price%7C0">Price - Low to High</option>
  <option value="/s/left+hand+of+darkness?Ns=P_Sale_Price%7C1">Price - High to Low</option>
  <option value="/s/left+hand+of+darkness?Ns=P_Display_Name%7C0">Title - A to Z</option>
  <option value="/s/left+hand+of+darkness?Ns=P_Display_Name%7C1">Title - Z to A</option>
  </select>
<div class="selectBox-container">
  <a class="selectBox hidden selectBox-dropdown selectBox--filled" title="Sort by:" tabindex="0" style="display: inline-block;" aria-labelledby="sortProducts1-button-label" id="sortProducts1-replacement" aria-expanded="false" aria-owns="selectBox-2">
  <span class="selectBox-title">Sort by:</span>
  <span class="selectBox-label" id="sortProducts1-button-label">Top Matches</span>
  <span class="selectBox-arrow"></span>
  </a>
  <ul class="selectBox-dropdown-menu selectBox-options hidden-selectBox-dropdown-menu" style="display: none;" id="selectBox-2" role="listbox">
    <li id="sortProducts1-option-0" role="option">
      <a rel="/s/left+hand+of+darkness">Top Matches</a>
    </li>
    <li id="sortProducts1-option-1" role="option">
      <a rel="/s/left+hand+of+darkness?Ns=P_Sales_Rank%7C0">Best Sellers</a>
    </li>
    <li id="sortProducts1-option-2" role="option">
      <a rel="/s/left+hand+of+darkness?Ns=P_Publication_Date%7C1">Newest to Oldest</a>
    </li>
    <li id="sortProducts1-option-3" role="option">
      <a rel="/s/left+hand+of+darkness?Ns=P_Publication_Date%7C0">Oldest to Newest</a>
    </li>
    <li id="sortProducts1-option-4" role="option">
      <a rel="/s/left+hand+of+darkness?Ns=P_Sale_Price%7C0">Price - Low to High</a>
    </li>
    <li id="sortProducts1-option-5" role="option">
      <a rel="/s/left+hand+of+darkness?Ns=P_Sale_Price%7C1">Price - High to Low</a>
    </li>
    <li id="sortProducts1-option-6" role="option">
      <a rel="/s/left+hand+of+darkness?Ns=P_Display_Name%7C0">Title - A to Z</a>
    </li>
    <li id="sortProducts1-option-7" role="option">
      <a rel="/s/left+hand+of+darkness?Ns=P_Display_Name%7C1">Title - Z to A</a>
    </li></ul></div>
</div>

我似乎无法选择下拉列表中的选项。

我最近的尝试是这样的：

describe('Visits book store and finds cheapest book', () => {
    it('Visits book store and finds cheapest book', () => {
        cy.visit('https://www.barnesandnoble.com/');
        cy.get(`[id="searchBarBN"]`).type('Left Hand of Darkness');
        cy.get('.icon-search-2').click();
        cy.get(`[id="sortProducts1-replacement"]`).find(`[id="sortProducts1-option-4"]`)
          .click({ force: true });

没有失败，但排序选项仍然未选中，因为 DOM 没有按价格升序对图书结果进行排序。 寻求帮助以确保我正确选择了所需的下拉选项。

Answer 1

您很可能需要等待点击后返回结果 (cy.get('.icon-search-2').click())在尝试选择任何元素或做出断言之前。 Cypress 正在尝试选择尚未渲染的元素。

这可以通过使用cy.wait 来针对结果路由来完成。

在waiting on network requests 的Cypress Real World App、a payment application to demonstrate real-world usage of Cypress testing methods, patterns, and workflows 中有几个例子证明了这个概念。