How to select random item from drop-down list using Cypress?

Question

In the site: https://www.testandquiz.com/selenium/testing.html there is a drop down located here enter image description here

The html is like the following:

 <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>

I would like to:

1. Click on the mentioned drop down
2. Count the number of items
3. Select the random item from the list

How to deal with that usuing cypress ?

I tried by the following but the test failed

 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(); }) })

Answer 1

In the site: https://www.testandquiz.com/selenium/testing.html there is a drop down located here enter image description here

The html is like the following:

 <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>

I would like to:

1. Click on the mentioned drop down
2. Count the number of items
3. Select the random item from the list

How to deal with that usuing cypress ?

I tried by the following but the test failed

 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(); }) })

Answer 2

In the site: https://www.testandquiz.com/selenium/testing.html there is a drop down located here enter image description here

The html is like the following:

 <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>

I would like to:

1. Click on the mentioned drop down
2. Count the number of items
3. Select the random item from the list

How to deal with that usuing cypress ?

I tried by the following but the test failed

 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(); }) })

Answer 3

cy.get(`#selectId> option`)
.then(listing => {        
  const randomNumber = getRandomInt(0, listing.length);
  cy.get(`#selectId> option`).eq(randomNumber).then(($select) => {        
    const text = $select.text()       
    cy.get(`#selectId`).select(text)      
  });    
})-

function getRandomInt(min, max){      
  return Math.floor(Math.random() * (max - min + 1)) + min;    
} 

HTML code:

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