CODEWITHSUNDEEP
javascriptautomationcypress
Orbita1frame
Orbita1frame

Reputation: 301

Can't seem to select an option in the dropdow using cypress

I am trying to select "small" from the "Select your size" drop down from the following site using cypress:

https://www.giant-bicycles.com/us/tcr-advanced-2-pro-compact-2021

and for the life of me I can't seem to get it. I've used a couple of ways and keep on running into a wall using cypress.

this is what I have so far:

/// <reference types="cypress"/>

describe('Giant Website', () => {

    beforeEach('Navigate to Giant website', () =>{
        cy.NavigateToGiantWebsite()
    })

    it('check stock', () => {
       cy.contains('button', 'I Understand').click()
       cy.get('[id="682"]').contains('a', 'TCR Advanced').click()
       cy.get('[alt="TCR Advanced 2 Pro Compact Unicorn White"]').click()
       cy.get('[title="Select your size"]').click({force: true})
       //cy.contains('li', 'Small ').click() this select x-small instead of small
       cy.get('[ng-show="lockedCart.length == 0"]').contains('[for="sizes"]').click() 
        
    });
})

Please help

Upvotes: 1

Views: 857

Answers (2)

Richard Matsen
Richard Matsen

Reputation: 23483

The reason(s) that cy.contains('li', 'Small ') picks up the x-small size are

  • cy.contains(selector, content) where content is a string will look for the any option containing the specified string, so will match both x-small and small.

  • it returns only one element, and the first one is x-small.

Instead of a string you can use a simple RegExp and use the caret ^ to restrict it to match at the start.

So, this works

cy.contains('li', /^Small/).click()

Ref: .contains() - Regular Expression

Note, if you use the count of li (e.g .eq(5)), your test will need to be updated if website changes options.

Upvotes: 1

soccerway
soccerway

Reputation: 11991

Please try below and this is working for me and selecting "Small " from Select your size drop down. You could use eq(5) option to get into the correct li element and use contains()

cy.get('.dropdown-menu > div > ul li').eq(5).then(($li)=>{
     cy.wrap($li).find('a').find('span').contains("Small ").click();
 })

enter image description here

Upvotes: 0

Related Questions