使用硬編碼的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']