使用硬编码的Xpath查找元素的替代方法

Question

我下面有一个html，其中仅包含div标记，这些标记包含文本字段和用于验证消息的显示：

<div class="payment-form">
   <div class="payment-form__payment-type">
      <div class="false-label">Payment type</div>
      <div class="form-column">
         <div class="false-label">Name on card</div>
         <div class="form-element-wrapper form-element-wrapper--input-text clearfix form-element-wrapper--error form-element-wrapper--show-label"><label for="name-on-card">Name on card</label> <input name="name-on-card" data-payment-jet2="holderName" id="name-on-card" type="text" maxlength="32" data-vv-id="_0zd5ajemk" aria-required="true" aria-invalid="true"></div>
         <p class="validation-message validation-message--active" style="">Please correct the name on card</p>
      </div>
      <div class="form-column">
         <div class="false-label">Card number</div>
         <div class="form-element-wrapper form-element-wrapper--input-text clearfix form-element-wrapper--error form-element-wrapper--show-label"><label for="card-number">e.g 1111-2222-3333-4444</label> <input type="hidden" data-payment-jet2="number"> <input name="card-number" id="card-number" type="tel" maxlength="23" class="js-payment-card-number" data-vv-id="_wn4jqw3yg" aria-required="true" aria-invalid="true"></div>
         <p class="validation-message validation-message--active" style="">Please correct the card number</p>
      </div>
   </div>
</div>

现在我遇到的问题是同一类的验证消息：

<p class="validation-message validation-message--active" style="">

在我的硒中，我想确保显示正确的验证，但是由于它们具有相同的类，因此除非使用了硬编码的脏xpath，否则无法区分两者之间的区别：

public static By NameOnCardValidation => By.XPath("/html/body/div[1]/div[3]/section/div[6]/div[2]/div/div/div/div/div[3]/p");
public static By CardNumberValidation => By.XPath("/html/body/div[1]/div[3]/section/div[6]/div[2]/div/div/div/div/div[4]/p");

这样就使得维护工作变得困难，好像网站上有任何更改一样，那么我将不得不不断更新这些xpath。

我的问题是，您能找到一种无需输入像上面这样的硬编码xpath就能更轻松地找到验证消息的方法吗？ 只是为了让您知道验证中的消息可能会更改，因此在验证消息中查找文本并不是一个好主意。

谢谢，

Answer 1

正如您所提到的，验证中的消息可能会更改，因此我们将创建独立于Messages xpath 。 通过我们的动态xpath我们将能够控制所有可能包含任何消息的<p>标签，如下所示：

public static By NameOnCardValidation => By.XPath("//div[@class='payment-form']//following::p[1]");
public static By CardNumberValidation => By.XPath("//div[@class='payment-form']//following::p[2]");

Answer 2

我的问题是，您能找到一种无需输入像上面这样的硬编码xpath就能更轻松地找到验证消息的方法吗？

在这种情况下，我们以简单通用的方式进行操作（使用JBehave和Java，但这无关紧要的实现细节）

---

在故事级别，有一个简单的“ Then步骤：

When an user performs some action
Then a message appears on the screen: some message

它的实现如下所示：

@Then("a message appears on the screen: $message")
public void shoudMeassageAppearOnTheScreen( String message ){
      String xpath = String.format( 
           "//*[contains( @class, 'validation-message' ) and text() = '%s' ]", message 
      );

       WebDriverWait wait = new WebDriverWait( driver, 5 );
       try{ 
          wait.until( ExpecedConditions.visibilityOfElementLocated( By.xpath( xpath ));
      }catch( Exception e ){
         throw new RuntimeException( "Message is not visible: " + message, e );
      }
}

因此，我们正在等待5秒钟的消息，如果该消息不可见，则会引发带有可理解的错误消息的异常，并且测试失败（由于引发了异常的日志）。

Answer 3

如果错误消息本身不会改变，则您应该可以使用以下Xpath：

 //p[contains(text() ='Please correct the card number')]

不管它在页面上的什么位置，只要实际的错误消息没有变化，它都应继续工作。 我尝试使用[contains]方法进行硒的所有工作。 它使应用程序更加健壮，并且不受html更改的影响较小。 如果您对页面有任何控制权，则在段落中添加ID可能是一种更好的方法。 然后，您可以使用类似：

 //p[@id='cardnumber_error']