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

编程问答 2022-08-14

问题描述

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

问题1：一旦有一个用于前端的新版本，所有类都将更改。

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

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>

元素在用户界面上显示为灰色。

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

是否可以检查Silk类的CSS属性并执行BettingAdd__Single类的click元素？

解决方法

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

,

答案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()

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