如何基于文本定位元素?

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

How to locate an element based on its text?

问题

以下是翻译好的内容:

这是元素的DOM,

<span _ngcontent-vej-c357="" class="tree-oooo-name mr-2 mod-cursor-pointer"> 
  qa-testData1 
  <span _ngcontent-vej-c357="" class="some-name"><!----></span>
</span>

<span _ngcontent-vej-c357="" class="tree-oooo-name mr-2 mod-cursor-pointer"> 
  qa-testData2 
  <span _ngcontent-vej-c357="" class="some-name"><!----></span>
</span>

注意:在DOM中,有超过10个具有相同标识符“tree-oooo-name mr-2 mod-cursor-pointer”的元素。

当我尝试使用此选择器时,它会返回多于1个匹配的元素:
span[class*='tree-oooo-name']

是否有一种方法可以根据元素的名称(qa-testData1qa-testData2)来识别元素,而不使用xpath?

英文:

This is the DOM for the elements,

<span _ngcontent-vej-c357="" class="tree-oooo-name mr-2 mod-cursor-pointer"> 
  qa-testData1 
  <span _ngcontent-vej-c357="" class="some-name"><!----></span>
</span>

<span _ngcontent-vej-c357="" class="tree-oooo-name mr-2 mod-cursor-pointer"> 
  qa-testData2 
  <span _ngcontent-vej-c357="" class="some-name"><!----></span>
</span>

Note: In the DOM, there are more than 10 elements with same identifier - tree-oooo-name mr-2 mod-cursor-pointer

When I try to use this selector it gives more than 1 matching element:
span[class*='tree-oooo-name']

Is there a way to identify the element based on its name (qa-testData1 and qa-testData2) without using xpath?

答案1

得分: 2

Text such as qa-testData1 can be used in the selector with :contains(),

cy.get('span[class*="tree-oooo-name"]:contains(qa-testData1)')

or use the .contains() query chained after the cy.get().

cy.get('span[class*="tree-oooo-name"]').contains('qa-testData1')

but you may have some trouble with this particular HTML as there seems to be a textNode followed by another <span> without the previous one being closed.
Cypress is very fussy about the HTML being correctly formed.

英文:

Text such as qa-testData1 can be used in the selector with :contains(),

cy.get(&#39;span[class*=&quot;tree-oooo-name&quot;]:contains(qa-testData1)&#39;)

or use the .contains() query chained after the cy.get().

cy.get(&#39;span[class*=&quot;tree-oooo-name&quot;]&#39;).contains(&#39;qa-testData1&#39;)

but you may have some trouble with this particular HTML as there seems to be a textNode followed by another &lt;span&gt; without the previous one being closed.

Cypress is very fussy about the HTML being correctly formed.

答案2

得分: 0

使用Cypress根据其name属性来定位web元素,可以使用name属性选择器或contains方法。

使用name属性选择器:

cy.get('[name="username"]')

这段代码会定位具有name属性设置为"username"的元素。您可以将"username"替换为要定位的元素的实际名称。

使用contains方法:

cy.contains('[name]', 'username')

这段代码会定位具有name属性并包含文本"username"的元素。同样,您可以将"username"替换为要定位的元素的实际名称。

这两种方法都返回一个表示web元素的Cypress对象,您可以使用它来与元素交互。

注意:您可以使用cy.get()方法以不同的选择器选项来定位web元素,例如元素的标签名称、类名、ID、属性等。

英文:

To locate a web element based on its name in Cypress, you can use either the name attribute selector or the contains method.

Using the name attribute selector:

cy.get(&#39;[name=&quot;username&quot;]&#39;)

This code locates the element with the name attribute set to "username". You can replace "username" with the actual name of the element you want to locate.

Using the contains method:

cy.contains(&#39;[name]&#39;, &#39;username&#39;)

This code locates the element that has a name attribute and contains the text "username". Again, you can replace "username" with the actual name of the element you want to locate.

Both methods return a Cypress object that represents the web element, which you can use to interact with the element.

NOTE: You can locate a web element using the cy.get() method with various selector options, such as the element's tag name, class name, ID, attribute, etc.

huangapple
  • 本文由 发表于 2023年3月9日 14:40:15
  • 转载请务必保留本文链接:https://go.coder-hub.com/75681207.html
匿名

发表评论

匿名网友

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

确定