如何在不使用 xpath 的情况下检查元素答案

【问题标题】：How to inspect element without using xpath如何在不使用 xpath 的情况下检查元素
【发布时间】：2021-04-23 06:38:06
【问题描述】：

在某些不避免 xpath 的情况下，我仍然有困难。对于下面这个问题如何避免呢？有人有一个网站，教了很多方法来做到这一点.. 非常感谢。

这个类在页面上重复了不止一次。

'//*[@id="gatsby-focus-wrapper"]/div/div/div/main/div/div/div[2]/form/div1/span[2]'

请看图。

【问题讨论】：

请不要包含这样的图片；它们是不可测试的。除了 XPath 之外，当然还有其他查找信息的方法，但由于没有其他人知道您的测试是什么或它们如何失败，除非您更新您的问题，否则您不太可能获得帮助。

【解决方案1】：

您没有说明您要对该元素执行什么操作，但很可能不需要检查整个页面结构，因为该元素中包含文本。此外，使用具有完整页面结构的 XPath 会使您的测试变得非常脆弱。

如果你想找到你可以做的元素

find('span', text: 'E-mail inválido')

或者如果您想验证它是否在 gatsby-focus-wrapper 内，您可以这样做

find('#gatsby-focus-wrapper span', text: 'E-mail inválido')

如果你想验证它是否存在，你可以这样做

expect(page).to have_css('span', text: 'E-mail inválido') # using RSpec

或

asset_css('span', text: 'E-mail inválido') # using Minitest

如果您也需要/想要测试类库，您可以使用带有类过滤器的正则表达式，例如

expect(page).to have_css(
  'span', 
  text: 'E-mail inválido', 
  class: /signUpFormFields__InputError\-/
)

【讨论】：