Question

在我们的应用中，我们具有以下下拉选择器：

<select class="ng-tns-c77-28" aria-hidden="true" tabindex="-1" aria-label="Banana">
  <!---->
  <!---->
  <!---->
  <!---->
  <!---->
  <option class="ng-tns-c77-28 ng-star-inserted" value="15">Apple</option>
  <option class="ng-tns-c77-28 ng-star-inserted" value="12">Banana</option>
  <option class="ng-tns-c77-28 ng-star-inserted" value="17">Cherry</option>
  <option class="ng-tns-c77-28 ng-star-inserted" value="13">Orange</option>
  <!---->
</select>

我正在尝试使用cy.get('select').select("Apple", {force: true});选择“ Apple”选项。当用户在下拉菜单中选择一个选项时，页面的元素会更改，并根据您选择的水果显示不同的字段。

我的问题是，当尝试选择“ Apple”时，赛普拉斯声称在页面上没有任何更改的情况下准确地选择了它。下拉菜单甚至都没有变化，它继续显示已选择“香蕉”。根据控制台，正在选择值15，该值与“ Apple”相对应，但是页面上没有任何更改。

这真让我发疯。有人知道这里发生了什么吗？

Answer 1

一些调试思路：

在赛普拉斯UI中使用Cypress Command Log验证cy.get('select')返回正确的元素。
添加一个期望，这可能会提供赛普拉斯的更多内幕消息。

cy.get（'select'）。select（'Apple'）。should（'have.value'，'17'）
尝试使用select by value而不是标签，看看是否有效果。

cy.get（'select'）。select（'17'）。应该（'have.value'，'17'）

最后，建议选择比元素更细的元素（例如select）。在选择此元素时，请考虑添加一个data-test属性以供使用（例如，data-test =“ fruit-options”）。这样可以使您的测试代码更灵活地进行更改，并且可以在整个Cypress Real World App，a payment application to demonstrate real-world usage of Cypress testing methods, patterns, and workflows中看到该概念。

赛普拉斯5.2.0 .select（）不会触发选择

1 个答案: