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没有按价格升序对书籍结果进行排序，因此仍未选择sort选项。在确保我正确选择所需的下拉列表中寻求帮助。

Answer 1

您很可能需要等待点击（{cy.get('.icon-search-2').click()）之后才能返回结果。之前，尝试选择任何元素或进行断言。赛普拉斯正在尝试选择尚未渲染的元素。

这可以针对结果路由使用cy.wait。

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

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

1 个答案: