使用 Cypress 進行動態下拉驗證


網頁上有許多型別的下拉選單。下拉選單的型別是靜態和動態。靜態下拉選單使用 <select> 標記,而動態下拉選單通常使用 <input> 或 <ul> 標記。

具有 <select> 標記的靜態下拉選單在 Cypress 中使用名為 select() 的內建命令進行處理。動態下拉選單大多是自動建議下拉選單,在輸入搜尋的前幾個字母時,會顯示一個建議專案列表。

邏輯是在動態下拉選單中輸入幾個字元。根據該操作,將顯示一個建議列表。我們將在該列表中進行迭代。找到我們所需選項後,我們將對其執行 click() 操作。

示例

使用動態下拉選單的程式碼實現。

// test suite
describe('Tutorialspoint Test', function () {
   // test case
   it('Test Case1', function (){
      // test step to launch a URL
      cy.visit("https://tutorialspoint.tw/videotutorials/index.php");
      // enter test in the dynamic dropdown
      cy.get("#search-strings").type("Java");
      // wait for some time
      cy.wait(3000);
      // assertion to validate the number of search results
      cy.get('.clsHeadQuestion'). should('have.length',19);
      // iterate through the suggested options
      cy.get('.clsHeadQuestion').each(($el, index, $list) => {
         // condition matching check
         if($el.text() ==="Java"){
            // click() on that option for selection
            $el.click();
         }
      })
      // assertion to check if correct option is selected
      cy.get("#search-strings").should("have.value","Java");
   });
});

更新於: 05-Aug-2020

2K+ 次瀏覽

開啟您的 職業生涯

完成課程以獲得認證

開始
廣告