【问题标题】:Select WebElement by text within HTML通过 HTML 中的文本选择 WebElement
【发布时间】:2016-01-10 05:24:37
【问题描述】:

一段时间以来,我一直在尝试选择此 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。

【问题讨论】:

  • 如果你可以通过 css、xpath、.. 到达这个元素,你可以通过.getText().getAttribute("innerHTML") 获取文本。
  • 问题是我无法通过 css 或 xpath 访问它。
  • 那你应该给更多的html :)

标签: java selenium automation


【解决方案1】:

如果您只绑定到 xpathcss 查找。

选项 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

我的最终建议是尝试实现您自己的 By 查找。我无法建议查找的实现,但是如果您需要这种行为,那么您应该知道您可能会创建一个子类来执行您想要的操作。

祝你好运。

【讨论】:

    【解决方案2】:

    对于老式的 inlie 样式 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);']"))
    

    【讨论】:

      猜你喜欢
      • 2013-02-16
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2020-06-10
      • 2012-03-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多