[Java版]Selenium系列：解决文本框联想内容自动输入-一一网

背景：在完成UI自动化过程中，会遇到文本框，在输入内容后，会出现联想选项，有些类似下拉框但又不同于下拉框的操作，例如携程：

如上，想从联想的内容中选择某一项输入，该如何实现？

好，明白了，超级厉害，马上F12一开，右键定位页面元素，你会发现，这个联想框是会消失的，根本不可定位；愁煞人也。

@Test(enabled = true)
  void test_text_autoComplate() throws InterruptedException {
    driver.get("https://www.ctrip.com");
    String partialText = "北京";
    String actulText = "北京西站，北京";
    // 联想是出来了，但是这个示例的联想框无法通过F12右键定位元素，所幸既然知道目标输入值，就直接键入即可
    driver.findElement(By.id("HD_CityName")).sendKeys(partialText);

    WebElement element = driver.findElement(By.xpath("//div[starts-with(@id,'address_filterContainer_uid_')]"));
  // 当你找到下一步，就有点跟从下来选项一样的操作，从element中找一个列表集合，但是你发现却无法定位
  // 因为不是select标签下的option子元素，再者即使是上面的xpath还是自己手写抄下来的，div标签下的子集根本无从知晓。
复制代码

在解决上面的问题之前，先来看另一个例子或者百度输入框的联想输入框也是可定位元素的：

分析：通过F12调试模式，可以定位到文本框标签，联想出来的元素都能通过元素定位找到，点击Consle，输入：document.getElementById(“aria-option-3”)

这些元素都是可以通过Element栏找到的，那么需要选择联想内容的某一项，测试代码如下：

/**
* @BeforeClass
*  创建driver对象
*/

  @Test(enabled = false, description = "联想选择内容输入文本框")
  public void test1() throws Exception {
    driver.get(cont.expUrl);
    String partialText = "北京";
    // 输入一部分内容，会联想出其他选择项
    driver.findElement(By.id("hotel-destination-hp-hotel")).sendKeys(
        partialText);
    // 找到联想框的元素
    WebElement ele = driver.findElement(By.id("typeaheadDataPlain"));
    // 获取联想框标签下的元素
    List<WebElement> eles = ele.findElements(By.tagName("li"));

    // 遍历输出
    for (int i = 0; i < eles.size(); i++) {
      System.out.println("联想选择项：" + eles.get(i).getText());
    }
    Thread.sleep(2000);
    // 根据索引来选择文本内容输出即可
    for (WebElement el : eles) {
      if (el.getText().equals(eles.get(eles.size() - 2).getText())) {
        el.click();
        Thread.sleep(2000);
        break;
      }
    }
  }
  /**
  *@AfterClass
  * 完成测试，退出
  */
复制代码

这个网址的联想操作，与携程的联想操作，应该要是一样的，难点：在于找到输入框之下的标签元素。我还没右键查找，它就消失了，还怎么知道子标签是啥？

方法有二：

其一，当然不是百度，而是问开发啊，测试自己公司的产品，不问开发问百度，哪个有效率还用教你吗？

其二，当然是自己挑战难度，毕竟解决这类问题更令人振奋嘛；这种稍纵即逝的机会如何把握呢？后台开发可以debug，难道前端开发就不debug了吗？F12也自带debug功能，打断点操作如下：

哦豁，那么回到开局的一张图，选择subtree modifications子节点debug调试，这样就能知道div下有什么元素了，让后通过找元素的方法定位它

测试代码如下：

/**
   * 实际演示的是携程网，输入目的地联想的文本，选择输入， 但是在F12或其他浏览器查找元素的时候，这个框一闪即逝，
   * 解决方法：F12设置前后断点，单步调试即可让这个元素显示不消失。
   * 
   * @throws InterruptedException
   */
  @Test(enabled = true)
  void test_text_autoComplate() throws InterruptedException {
    driver.get("https://www.ctrip.com");
    String partialText = "北京";
    String actulText = "北京西站，北京";
    // 联想是出来了，但是这个示例的联想框无法通过F12右键定位元素，所幸既然知道目标输入值，就直接键入即可
    driver.findElement(By.id("HD_CityName")).sendKeys(partialText);

    WebElement element = driver
        .findElement(By
            .xpath("//div[starts-with(@id,'address_filterContainer_uid_')]"));
    // 判断是否元素是否显示
    if (element.isDisplayed()) {
      List<WebElement> elements = element.findElements(By
          .cssSelector("div.sug_item>a>span.city"));
      // for (int i = 0; i < elements.size(); i++) {
      // System.out.println(elements.get(i).getText());
      // }
   
      // 两个if条件选一个测试即可，两种场景实现联想内容的输入框测试
      for (WebElement ele : elements) {
        // 这个是目标值来判断：获取元素的text与目标输入文本保持一致
        if (actulText.equals(ele.getText())) {
          System.out.println("结果选择正确");
          ele.click();
          Thread.sleep(5000);
          break;
        }
        // 这是根据索引随机选择一项文本进行点击
        if (ele.getText().equals(
            elements.get(elements.size() - 2).getText())) {
          System.out.println("结果选择shi :" + ele.getText());
          ele.click();
          Thread.sleep(5000);
          break;
        }
      }
    }

  }
复制代码

唉、这算是复习了，之前没好好记录解决这类问题的方法，现在又需要重新学习来完成它，虽然花了很多时间，但是值得的！缺点：耗时，优点：提升解决问题的思维。愿君共勉！