Cypress使用动态CSS测试laravel web应用程序问题

在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时，我都无法识别它们。

您可以尝试的最简单方法是

cy.get（'input[id^=“address”]”）//仅在id的初始部分进行选择

如果出现问题（可能有多个id以“address”开头），可以在Vue的挂载钩子中添加一些代码，将完整id公开为窗口属性，然后Cypress可以在每次测试运行期间读取准确的id

---

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

cy.get（'input[placeholder=“Začnite písaťadresu…”）