如何在 Cypress 中有条件地遍历 DOM？

huangapple
go评论93阅读模式
英文:

How Do I Traverse The DOM with Cypress Conditionally?

问题

I would like to click the "View profile" button when the firstName of the user is equal to "Luke". There will be many users on one page.

HTML:

  1. <div>
  2.     <div>
  3.         <a datcy="viewProfileButton">查看个人资料</a>
  4.     </div>
  5.     <div>
  6.         <div>
  7.             <div>
  8.                 <h5 datacy="firstName">Luke</h5>
  9.             </div>
  10.         </div>
  11.     </div>
  12. </div>

Cypress Test:

  1. cy.get('[datacy="firstName"]').contains('Luke').parent().parent().find('[datcy="viewProfileButton"]').click();

I've got to this point, but I am struggling with .parents() and other Cypress traversing options to move up the div, and then back down.

英文:

I would like to click the "View profile" button when the firstName of the user is equal to "Luke". There will be many users on one page.

HTML:

  1. &lt;div&gt;
  2.     &lt;div&gt;
  3.         &lt;a datcy=&quot;viewProfileButton&quot;&gt;View profile&lt;/a&gt;
  4.     &lt;/div&gt;
  5.     &lt;div&gt;
  6.         &lt;div&gt;
  7.             &lt;div&gt;
  8.                 &lt;h5 datacy=&quot;firstName&quot;&gt;Luke&lt;/h5&gt;
  9.             &lt;/div&gt;
  10.         &lt;/div&gt;
  11.     &lt;/div&gt;
  12. &lt;/div&gt;

Cypress Test:

cy.get(&#39;[datacy=&quot;firstName&quot;]&#39;).contains($firstName)...

I've got to this point, but I am struggling with .parents() and other Cypress traversing options to move up the div, and then back down.

答案1

得分: 1

.parent()和.children()函数相对静态，如果HTML的结构发生变化，可能会导致不稳定性。

我建议设置你的HTML以允许从更高级别的元素向下遍历。

在你的情况下，如果你在最上层的<div>上有一个共同的datacy属性，你可以使用cy.contains()和find()来完成所有繁重的工作。

  1. <!-- 举例添加了第二个配置文件 -->
  2. <div datacy="profile">
  3.     <div>
  4.         <a datacy="viewProfileButton">查看Luke的配置文件</a>
  5.     </div>
  6.     <div>
  7.         <div>
  8.             <div>
  9.                 <h5 datacy="firstName">Luke</h5>
  10.             </div>
  11.         </div>
  12.     </div>
  13. </div>
  15. <div datacy="profile">
  16.     <div>
  17.         <a datacy="viewProfileButton">查看Alice的配置文件</a>
  18.     </div>
  19.     <div>
  20.         <div>
  21.             <div>
  22.                 <h5 datacy="firstName">Alice</h5>
  23.             </div>
  24.         </div>
  25.     </div>
  26. </div>
  1. // cy.contains返回包含带有文本“Luke”的<div datacy='profile'>元素
  2. it('获取链接', () => {
  3.   cy.contains('[datacy="profile"]', 'Luke') 
  4.     .find('a')
  5.     .should('have.text', "查看Luke的配置文件");
  7.   cy.contains('[datacy="profile"]', 'Alice') 
  8.     .find('a')
  9.     .should('have.text', "查看Alice的配置文件");
  10. });

使用cy.contains()获取包含特定文本的父元素

英文:

The .parent() and .children() function are pretty static and can be prone to cause flakiness if the structure of the HTML changes.

I would suggest setting up your HTML to allow for downward traversal from a higher level element.

In your case, if you have a common datacy attribute on the upper most &lt;div&gt; you can use cy.contains() and find() to do all the heavy lifting for you.

  1. &lt;!-- Added a second profile for example --&gt;
  2. &lt;div datacy=&quot;profile&quot;&gt;
  3.     &lt;div&gt;
  4.         &lt;a datacy=&quot;viewProfileButton&quot;&gt;View Luke&#39;s profile&lt;/a&gt;
  5.     &lt;/div&gt;
  6.     &lt;div&gt;
  7.         &lt;div&gt;
  8.             &lt;div&gt;
  9.                 &lt;h5 datacy=&quot;firstName&quot;&gt;Luke&lt;/h5&gt;
  10.             &lt;/div&gt;
  11.         &lt;/div&gt;
  12.     &lt;/div&gt;
  13. &lt;/div&gt;
  15. &lt;div datacy=&quot;profile&quot;&gt;
  16.     &lt;div&gt;
  17.         &lt;a datacy=&quot;viewProfileButton&quot;&gt;View Alice&#39;s profile&lt;/a&gt;
  18.     &lt;/div&gt;
  19.     &lt;div&gt;
  20.         &lt;div&gt;
  21.             &lt;div&gt;
  22.                 &lt;h5 datacy=&quot;firstName&quot;&gt;Alice&lt;/h5&gt;
  23.             &lt;/div&gt;
  24.         &lt;/div&gt;
  25.     &lt;/div&gt;
  26. &lt;/div&gt;
  1. // cy.contains returns the &lt;div datacy=&#39;profile&#39;&gt; containing a child with the text &#39;Luke&#39;
  2. it(&#39;get link&#39;, () =&gt; {
  3.   cy.contains(&#39;[datacy=&quot;profile&quot;]&#39;, &#39;Luke&#39;) 
  4.     .find(&#39;a&#39;)
  5.     .should(&#39;have.text&#39;, &quot;View Luke&#39;s profile&quot;);
  7.   cy.contains(&#39;[datacy=&quot;profile&quot;]&#39;, &#39;Alice&#39;) 
  8.     .find(&#39;a&#39;)
  9.     .should(&#39;have.text&#39;, &quot;View Alice&#39;s profile&quot;);
  10. });

Using cy.contains() to get parent element when child element contains text

huangapple
  • 本文由 发表于 2023年2月14日 03:03:43
  • 转载请务必保留本文链接：https://go.coder-hub.com/75440193.html
  • cypress
  • html
  • javascript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定