将 Cypress cy.get() 与包含选择器一起使用未按预期工作

Question

我正在尝试使用 Cypress 中的选择器以便能够在我的网页中找到数据。它似乎没有像我预期的那样工作，但这可能只是我不理解它应该工作的方式。

我正在做以下事情。 click() 只是为了让我看看 cy.get() 是否有效，我正在尝试找到正确的选择器。我最终会在复杂的 cy.contains() 中使用选择器，我正在尝试从头开始构建。

cy.get('body:contains(ATHLETE FIRST NAME)').click();

我有一个元素在两个地方有上述文本。但是上面的contains()貌似没有找到，不过也不会导致失败。

如果我将该行更改为：

cy.get('div:contains(ATHLETE FIRST NAME)').click();

它告诉我它找到了 12 次。似乎它只找到 body 或 div，但完全忽略了 :contains()。我在想我一定是做错了，但我发现一个例子似乎是这样做的，而且根本找不到很多例子。

==========

更新 2020-06-08

我正在换档。

这是我的代码正在执行的操作，来自 Cypress UI 日志。我不再使用 :contains() 选择器，而是使用 name：

contains [name=customerFirstName], johnie

这是当时显示的元素：

<input aria-invalid="false" id="outlined-name" name="customerFirstName" type="text"
       class="MuiInputBase-input MuiOutlinedInput-input" value="johnie"
       style="...">

没有找到 value，即使它在应该由 name 选择的元素中。我什至尝试在 '#outlined-name' 上搜索，但没有任何区别。

Answer 1

:contains() 没有被忽略，但赛普拉斯也在考虑 :contains() 所有 parent <div>。由于默认情况下 click 事件可以由 cypress 在单个元素上触发，您会在第二种情况下看到错误。

考虑这个模板：

<body>
  <div>
    <div>
      <div>ATHLETE FIRST NAME</div>
    </div>
  </div>
</body>

cy.get('body:contains(ATHLETE FIRST NAME)').click() 将 return 作为单个元素的 body 元素，因此不会出现错误。

但是

cy.get('div:contains(ATHLETE FIRST NAME)').click()

将 return 3 div 个元素，因此您将看到此错误：

cy.click() can only be called on a single element. Your subject contained 3 elements. Pass { multiple: true } if you want to serially click each element.

Answer 2

WRT 到您的更新，要获取输入字段的值，请参阅

How do I get an input’s value?

cy.get('[name=customerFirstName]')
  .should('have.value', 'johnie');

或

cy.get('[name=customerFirstName]')
  .invoke('val')
  .should('eq', 'johnie');

contains(selector, content)命令仅适用于内容在开始和结束标签之间的元素，适用于<div>、<span>等，不适用于<input />自闭。

将 Cypress cy.get() 与包含选择器一起使用未按预期工作

Using Cypress cy.get() with a contains selector not working as expected

jquery-selectors

cypress