Cypress 找不到实际存在的元素

Question

在 SAP Hybris 内部测试期间，我遇到了组件问题，我相信不会出现任何问题。也就是说，它是一个简单的组件，包含项目的描述（在本例中为促销）。
这是我最初的 cypress 命令：

cy.get('.ye-input-text.ye-com_hybris_cockpitng_editor_defaulttext.z-textbox')
    .should('have.value', 'All users are able to try a ZYN can as a free sample (or free gift). Limited to 1 per registered user');

使用此命令我收到以下问题：

现在，据我了解，它表明页面上有多个元素包含相同的类名（可以说是真的），但在这种情况下，我会期望例如选择多个元素错误或建议的错误使用 .eq() 命令左右。尽管从错误消息中我了解到 Cypress 遍历了它在给定类名中找到的所有 9 个元素，但没有一个包含所请求的值。

这是我所指的元素的 HTML：

<div id="p41H029" class="yw-loceditor-row ye-validation-none z-div">
<span id="p41H129" style="display:none;" class="yw-loceditor-row-locale z-label" title="English">en</span>
<div id="p41H229" class="yw-loceditor-row-editor z-div"><div id="p41H329" class="z-div">
<input id="p41H429" class="ye-input-text ye-com_hybris_cockpitng_editor_defaulttext z-textbox" value="All users are able to try a ZYN can as a free sample (or free gift). Limited to 1 per registered user" type="text" aria-disabled="false" aria-readonly="false"></div></div></div>

我尝试过的另一个 Cypress 命令是这个（但它不起作用）：

cy.contains('All users are able to try a ZYN can as a free sample (or free gift). Limited to 1 per registered user')
  .parents('.yw-loceditor-row.z-div') // Go up to the parent row
  .find('input') // Then find the input
  .should('have.value', 'All users are able to try a ZYN can as a free sample (or free gift). Limited to 1 per registered user');
                });
            });

Answer 1

简短的答案是，在选择具有此值的

<input>

时要更具体一些。

留言里可以看到

断言预期 [ , 8 更多... ]

这意味着总共选择了九个元素。

如果我使用三个输入运行类似的测试，并且我想要的值位于第二个输入上，则在比较 first 输入的值时会失败。

<input 
  class="ye-input-text ye-com_hybris_cockpitng_editor_defaulttext z-textbox"
  value="Some promotion"
/>
<input
  class="ye-input-text ye-com_hybris_cockpitng_editor_defaulttext z-textbox"
  value="My specific promotion"
/>
<input
  class="ye-input-text ye-com_hybris_cockpitng_editor_defaulttext z-textbox"
  value="Some other promotion"
/>

cy.get('.ye-input-text.ye-com_hybris_cockpitng_editor_defaulttext.z-textbox')
  .should('have.value', 'My specific promotion');

如果我使用

[value="..."]

选择器使选择更加具体，那么只选择一个元素 - 它会通过。

cy.get(`.ye-input-text[value="My specific promotion"]`)
  .should('have.value', 'My specific promotion');

您还可以使用其他选择器（例如

eq(1)

）来选择一个

<input>

元素进行测试。

---

规则是什么？

当您在返回

多个 元素的 .should('have.value', ...) 之后使用 cy.get() 时，它相当于

cy.get(...)                     // multiple elements selected
  .invoke('val')                // extract value of only the first element 
  .should('eq', 'some value')   // test the value

因此仅测试 first 元素，其余元素将被忽略。
以上是测试输入值的“标准”方法。