通過HTML中的文本選擇WebElement

Question

我一直在嘗試選擇此WebElement一段時間。 這是我測試的Web應用程序首頁上的注冊按鈕。 我想知道，是否可以使用一種方法來捕獲HTML中的文本以定義WebElement？

 <div> <div> <div style=""> <div style="transform: translate(0px, 0px) scale(0.5, 0.5) rotate(0deg);"> <div role="img"> <img src="images/lsloginform/newskin/try_it_normal.png?1444658058414"> </div> </div> <div style="transform: translate(0px, 75px) scale(1, 1) rotate(0deg);"> <canvas height="7" width="75" style="top: 0px; left: 0px; width: 75px; height: 7px;"></canvas> </div> <div style="transform: translate(0px, 82px) scale(1, 1) rotate(0deg);"> <div style="font-family: franklin-gothic-ext-comp-urw; font-weight: 700; font-style: normal; font-size: 15px; opacity: 1; color: rgb(63, 63, 63); transform: translate(7px, 0px) scale(1, 1) rotate(0deg);">SIGN&nbsp;UP</div> </div> </div> <div style="display: none;"></div> <div style="display: none;"> <div style="transform: translate(0px, 0px) scale(0.5, 0.5) rotate(0deg);"> <div role="img"> <img src="images/lsloginform/newskin/try_it_MO.png?1444665385167"> </div> </div> <div style="transform: translate(0px, 75px) scale(1, 1) rotate(0deg);"> <canvas height="7" width="75" style="top: 0px; left: 0px; width: 75px; height: 7px;"></canvas> </div> <div style="transform: translate(0px, 82px) scale(1, 1) rotate(0deg);"> <div style="font-family: franklin-gothic-ext-comp-urw; font-weight: 700; font-style: normal; font-size: 15px; opacity: 1; color: rgb(63, 63, 63); transform: translate(7px, 0px) scale(1, 1) rotate(0deg);">SIGN&nbsp;UP</div> </div> <div></div> </div> <div style="display: none;"></div> <div style="display: none;"></div> </div> </div> 

具體示例，我想使用HTML末尾的“ SIGN UP”文本來訪問上述div的xpath。 我該怎么做？

我測試過的應用程序非常糟糕，並且能夠通過該屬性進行選擇將使我的生活更加輕松。 這是有問題的原因是因為我需要3種不同的方法來獲取xpath：一種用於常規按鈕，一種用於懸停按鈕，另一種是因為單擊按鈕時按鈕會瞬時改變。 我的大多數自動化腳本如下所示：

    public class changeLanguageLogin {
        public void run(WebDriver driver) {
            WebElement changeLanguage = getWebElement(driver, "xpath", "img", "src", "select_application_language_normal");
            Actions actions = new Actions(driver);
            actions.moveToElement(changeLanguage).build().perform();
            WebElement changeLanguageMO = getWebElement(driver, "xpath", "img", "src", "select_application_language_hover");
            changeLanguageMO.click();
            WebElement changeLanguageClicked = getWebElement(driver, "xpath", "img", "src", "select_application_language_pushed");
            changeLanguageClicked.click();
        }


      private static By buildXPathExpression(String htmlElement, String attributeName, String attributeValue)
      {
          return By.xpath("//"+htmlElement+"[contains(@"+attributeName+",'"+attributeValue+"')]");
      }

      private static By buildCSSExpression(String htmlElement, String attributeName, String attributeValue)
      {
          return By.cssSelector(""+htmlElement+"["+attributeName+"='"+attributeValue+"']");
      }

      private static WebElement getWebElement(WebDriver driver, String operation, String htmlElement, String attributeName, String attributeValue)
      {
          By byObj = null;
          WebElement webElementObj = null;
          if(operation!= null)
          {
              if(operation.equals("xpath"))
              {
                  byObj = buildXPathExpression(htmlElement,attributeName,attributeValue);
              }
              else if(operation.equals("cssSelector"))
              {
                  byObj = buildCSSExpression(htmlElement,attributeName,attributeValue);
              }
          }
          if(byObj != null)
          {
              webElementObj = driver.findElement(byObj);
          }

          return webElementObj;
      }
}

每天有很多很多次，一種定義xpath的方法只是“行不通”，我不得不苦苦尋找另一種方法。 目的是不使用任何“硬編碼” xpath，因為這在我開始工作時是有問題的。

因此，我正在尋找答案：通過HTML中的文本“ SIGN UP”定義一個xpath。

Answer 1

如果僅綁定到xpath或CSS查找，此響應將無濟於事。

選項1

如果您願意在輔助方法中添加其他情況，我想By.linkText可以滿足您的要求？

  /**
   * @param linkText The exact text to match against
   * @return a By which locates A elements by the exact text it displays
   */
  public static By linkText(final String linkText) {
    if (linkText == null)
      throw new IllegalArgumentException(
          "Cannot find elements when link text is null.");

    return new ByLinkText(linkText);
  }

或者可能是By.partialLinkText

  /**
   * @param linkText The text to match against
   * @return a By which locates A elements that contain the given link text
   */
  public static By partialLinkText(final String linkText) {
    if (linkText == null)
      throw new IllegalArgumentException(
          "Cannot find elements when link text is null.");

    return new ByPartialLinkText(linkText);
  }

如果您要針對已國際化的系統進行測試，則可能會遇到問題。 根據環境的不同，用戶/瀏覽器的語言環境會更改您要查找的文本。

如果文本更改，這也可能是維護問題。

選項2

如果可以控制HTML，則可以考慮將id添加到頁面上的元素。 這樣，您可以使用By.id查找。 從我的一些初步研究中，元素id被視為更可靠和一致的路徑之一。

/**
   * @param id The value of the "id" attribute to search for
   * @return a By which locates elements by the value of the "id" attribute.
   */
  public static By id(final String id) {
    if (id == null)
      throw new IllegalArgumentException(
          "Cannot find elements with a null id attribute.");

    return new ById(id);
  }

選項3

我的最終建議是嘗試實現自己的按查找。 我可能沒有建議查詢的實現，但是如果您需要這種行為，那么您應該意識到，您可能會創建一個子類來完成您想要的事情。

祝你好運。

Answer 2

對於舊式ins樣式css，生成css選擇器取決於為div編寫的樣式，例如"div[style*='paste_style_attribute']" 。 但是，由於重復相同的樣式，因此此方法不可靠。

對於以下div：

<div style="font-family: franklin-gothic-ext-comp-urw; font-weight: 700; font-style: normal; font-size: 15px; opacity: 1; color: rgb(63, 63, 63); transform: translate(7px, 0px) scale(1, 1) rotate(0deg);">SIGN&nbsp;UP</div>

您可以生成以下css選擇器：

"div[style*='font-family: franklin-gothic-ext-comp-urw; font-weight: 700; font-style: normal; font-size: 15px; opacity: 1; color: rgb(63, 63, 63); transform: translate(7px, 0px) scale(1, 1) rotate(0deg);']"

Java代碼：

driver.findElement(By.cssSelector("div[style*='font-family: franklin-gothic-ext-comp-urw; font-weight: 700; font-style: normal; font-size: 15px; opacity: 1; color: rgb(63, 63, 63); transform: translate(7px, 0px) scale(1, 1) rotate(0deg);']"))