似乎无法使用cypress在下拉菜单中选择一个选项

Question

我正在尝试使用cypress从以下站点的“选择您的尺寸”下拉列表中选择“小”：

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

对于我的一生，我似乎无法理解。我使用了几种方法，然后继续使用柏树撞墙。

这是我到目前为止所拥有的：

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

请帮助

Answer 1

cy.contains('li', 'Small ')选择小x的原因是

• cy.contains(selector, content)（其中内容为字符串）将查找包含指定字符串的any选项，因此将同时匹配x-small和small。

• 它仅返回一个元素，第一个是x-small。

您可以使用简单的 RegExp 而不是字符串，并使用插入符号^来限制它在开始时匹配。

所以，这可行

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

参考：.contains() - Regular Expression

请注意，如果您使用li的计数（例如.eq(5)），那么如果网站更改了选项，则需要更新您的测试。

Answer 2

请尝试以下操作，这对我有用，请从Select your size下拉菜单中选择“小”。您可以使用eq(5)选项进入正确的li元素并使用contains()

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