如何使用赛普拉斯从下拉列表中选择随机项目？答案

【问题标题】：How to select random item from drop-down list using Cypress?如何使用赛普拉斯从下拉列表中选择随机项目？
【发布时间】：2020-10-24 16:30:44
【问题描述】：

在网站中：https://www.testandquiz.com/selenium/testing.html 有一个下拉菜单位于此处 enter image description here

html如下：

<select id="testingDropdown">
<option id="automation" value="Automation">Automation Testing</option>
<option id="performance" value="Performance">Performance Testing</option>
<option id="manual" value="Manual">Manual Testing</option>
<option id="database" value="Database">Database Testing</option>
</select>

我想：

点击提到的下拉菜单
统计项目数
从列表中选择随机项

如何处理使用柏树的问题？

我尝试了以下但测试失败

describe('Cypress.io tests', function() {
    it('Open cypress.io page', function() {
      var cypressPage = 'https://www.testandquiz.com/selenium/testing.html'
      
cy.visit(cypressPage)
     cy.xpath("//[@id='testingDropdown']").click();

    })
  })

【问题讨论】：

究竟是什么以错误结束？似乎是什么问题？在您的代码中，我没有看到尝试选择随机值。

标签： javascript drop-down-menu cypress

【解决方案1】：

你为什么不使用 .get() 来访问你的元素？使用 .children() 您可以获取下拉列表中的元素数量。

cy.get('#testingDropdown').children()

或者你想要它作为一个变量？

【讨论】：

【解决方案2】：

例如，我们有一个包含三个选项的选择。

HTML 代码：

<select id="selectId">
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

javascript代码：

  //Random int number generator between min and max
  function getRandomInt(min, max){      
    return Math.floor(Math.random() * (max - min + 1)) + min;    
  } 

  cy.get(`#selectId> option`) // we get the select/option by finding the select by id
  .then(listing => {        
    const randomNumber = getRandomInt(0, listing.length-1); //generate a rendom number between 0 and length-1. In this case 0,1,2
    cy.get(`#selectId> option`).eq(randomNumber).then(($select) => {              //choose an option randomly
      const text = $select.text()       //get the option's text. For ex. "A"
      cy.get(`#selectId`).select(text)       // select the option on UI
    });    
  })

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

【解决方案3】：

聚会有点晚了。

赛普拉斯不允许您使用 click() 选择元素。您将需要为此使用选择功能。您还需要两个 xpath：

对于下拉元素
用于随机选择的下拉选项。

这是工作代码

describe('Cypress.io tests', function() {
it('Open cypress.io page', function() {
  var cypressPage = 'https://www.testandquiz.com/selenium/testing.html';
  
cy.visit(cypressPage);
   // Get the array of options
   cy.xpath('//*[@id="testingDropdown"]//option').then(($elements) => {
  const randomOption = Math.floor(Math.random() * $elements.length);
  // select option from drop down
  cy.xpath('//*[@id="testingDropdown"]').select(`${$elements[randomOption].innerText}`);
  cy.log(`random option selected is ${$elements[randomOption].innerText}}`);
})
})

【讨论】：