使用 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.com/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+ 次浏览

开启您的 职业生涯

完成课程以获得认证

开始
广告