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

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

技术杂谈小彩虹2021-07-15 9:53:2380A+A-

背景:在完成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;
        }
      }
    }

  }

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

图片

本文使用 文章同步助手 同步

点击这里复制本文地址 以上内容由权冠洲的博客整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

联系我们| 本站介绍| 留言建议 | 交换友链 | 域名展示
本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除

权冠洲的博客 © All Rights Reserved.  Copyright quanguanzhou.top All Rights Reserved
苏公网安备 32030302000848号   苏ICP备20033101号-1

联系我们