似乎无法使用 cypress 在下拉列表中选择一个选项答案

【问题标题】：Can't seem to select an option in the dropdow using cypress似乎无法使用 cypress 在下拉列表中选择一个选项
【发布时间】：2020-07-06 22:16:11
【问题描述】：

我正在尝试使用 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() 
        
    });
})

请帮忙

【问题讨论】：

标签： javascript automation cypress

【解决方案1】：

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

cy.contains(selector, content) where content is a string 将查找包含指定字符串的 any 选项，因此将匹配 x-small 和 small。
它只返回一个元素，第一个是x-small。

您可以使用简单的 RegExp 代替字符串，并使用插入符号 ^ 将其限制为在开头匹配。

所以，这行得通

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

参考：.contains() - Regular Expression

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

【讨论】：

【解决方案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();
 })

【讨论】：