Cypress 使用动态 CSS 测试 laravel Web 应用程序问题答案

【问题标题】：Cypress testing laravel web app problem with dynamic CSSCypress 使用动态 CSS 测试 laravel Web 应用程序问题
【发布时间】：2021-04-30 07:19:58
【问题描述】：

在 laravel 的 .vue 文件中，这里定义了这个输入文件：

    <div class="flex flex-col lg:flex-row">
        <div v-if="cargo" class="lg:w-1/2 w-full mb-2 lg:mb-0 " :class="{'lg:p-2' : cargo, '' : !cargo}">
            <vue-google-autocomplete
                    v-if="googleLoaded"
                    class="address-field"
                    types=""
                    :id="'address'+id"
                    autocomplete="off"
                    classname="w-full box-border form-control form-input form-input-bordered"
                    placeholder="Začnite písať adresu..."
                    v-on:placechanged="setAddress"
                    v-on:error="handleAutocompleteError"
            >
            </vue-google-autocomplete>
        </div>

我的问题是这样的： :id="'address'+id" 这意味着每次 CSS ID 都不同，我需要在每次测试中更改它才能正常工作。它们按顺序排列，但总是另一个数字（9 10 11 或 13 14 15 等）除了页面上所有 3 个字段的此 ID 外，没有其他任何不同，因此当 ID 每次都更改时，我无法识别它们。

【问题讨论】：

标签： css laravel cypress

【解决方案1】：

您可以尝试的最简单的方法是Attribute Starts With Selector

cy.get('input[id^="address"]')         // select on just the initial part of the id

如果有问题（可能是多个以“地址”开头的 id），您可以在 Vue 的挂载钩子中添加一些代码，将完整的 id 公开为窗口属性，然后赛普拉斯可以在每次测试运行期间读取确切的 id。

您也可以切换到占位符进行选择

cy.get('input[placeholder="Začnite písať adresu..."])

【讨论】：