如何为动态类编写 xpath 并检查 css 属性

Question

我正在尝试自动化使用 React 和 Sass 开发的系统。自动化工具是赛普拉斯。 我在开始工作时遇到的问题很少。因此所有元素都使用动态类。

问题 1：一旦有一个新的前端构建，所有的类都会改变。

例如：如果我编写以下命令

cy.get('.css-fdt4ua-Text-BettingAdd__Single').click();

fdt4ua -> 将随着新版本的变化而改变。

之后我的自动化脚本将失败，整个自动化脚本必须为新元素重写。是否可以使用 xpath 来唯一地标识页面 HTML 中的元素，如下所示？

当我为一个元素编写相对xpath时，由于同一个类一次又一次地重复，它与多个元素匹配。

尝试在下面的类上执行点击事件。类包含 MID Div 也是动态值。

<span class="css-fdt4ua-Text-BettingAdd__Single ewp79e31" xpath="1">MID Div </span>

这是我使用 ChroPath 编写的 xpath，发现有 16 个元素与此 xpath 匹配。

//span[包含(@class,'BettingAdd__Single')]

任何人都可以建议我一种更好的方法来识别唯一元素，而无需使用 ID 重写 HTML？

<li class="runner_35798501 ekk885d0 css-1ororew-ListItem-RaceSelectionsListItem e1vbyzvs0" xpath="1">
    <div class="css-pn8xrj-RaceSelectionsListItem__Wrapper ekk885d2">
        <div class="css-8cp37u">
            <div class="css-ej6d3p-RaceSelectionsDetails e1j851ih0">
                <div class="css-5jb77i-RaceSelectionsDetails__Silk e1j851ih1">
                    <div class="css-9pm5vz-RaceSelectionsDetails__SilkImage e1j851ih2"></div>
                    <div class="css-113z9a9-Text-RaceSelectionsDetails__LastStartsRow e1j851ih6">34</div>
                </div>
                <div class="css-x04caf-RaceSelectionsDetails__DetailsColumn e1j851ih5">
                    <div class="css-1eld9n9-Text-RaceSelectionsDetails__Name e1j851ih7">1. GIAAN'S GIRL
                        <span class="css-1nxtao7-Text e1j851ih8"> (1)
                        </span>
                    </div>
                    <div class="css-11nny5s-Text e1j851ih8">T: Wayne Gray</div>
                </div>
            </div>
        </div>
        <div size="1" class="win_35798501 ekk885d5 css-1e6g9j6-BettingAdd ewp79e33">
            <span class="css-fdt4ua-Text-BettingAdd__Single ewp79e31">MID Div </span>
            <span class="css-e36q88-Text-BettingAdd__Multi ewp79e32">
                <i class="css-184tbjb-Icon e1ym0f420" title="add"></i></span>
        </div>
        <div size="1" class="place_35798501 ekk885d5 css-1e6g9j6-BettingAdd ewp79e33">
            <span class="css-fdt4ua-Text-BettingAdd__Single ewp79e31">MID Div </span>
            <span class="css-e36q88-Text-BettingAdd__Multi ewp79e32">
                <i class="css-184tbjb-Icon e1ym0f420" title="add"></i></span></div><div class="css-10y5zla">
        </div>
    </div>
</li>

问题2：有一些

<span class="css-fdt4ua-Text-BettingAdd__Single ewp79e31" xpath="1">MID Div </span>

元素在 UI 上显示为灰色。

在执行自动化时，需要跳过这些元素。灰色元素和普通元素之间的唯一区别是丝绸类<div class="css-5jb77i-RaceSelectionsDetails__Silk e1j851ih1">属于灰色元素，其CSS属性为opacity:0.2

有没有办法检查 Silk 类的 CSS 属性并执行 BettingAdd__Single 类的 click 元素？

Answer 1

您可以做的是获取您想要抓取数据的网站的静态版本，但它会禁用所有 JS 属性，如按钮和所有。 要抓取数据，您可以转到www.scrapingdog.com，您可以获得基于 redux 的应用程序的静态页面，其中容器类在每个会话中都会更改。 获取静态页面后，您可以将其保存在“.html”文件中并运行您的自动化脚本。

Answer 2

答案 1： 您可以编写 css 定位器以匹配类名中不会更改的部分，例如。 cy.get('[class*=Text-BettingAdd__Single]').click()

答案 2： 由于类 div.silk 在类 Text-BettingAdd__Single 内，因此您可以编写类似

cy.get('[class*=Text-BettingAdd__Single]').parents().within(() => {
    cy.get('[class*=RaceSelectionsDetails__Silk').click()
})

如果您要在 DOM 树上向上一层，请使用 parent()；如果您要向上 DOM 树上多层，请使用 parents()

查看 cypress 文档 - https://docs.cypress.io/api/commands/parent.html#Syntax