目录

(七)通过linkText去定位页面上的元素

链接的定位

链接可以使用By.linkText和By.partialLinkText的方式去定位。

链接的html标签是<a></a>

看这个html代码<a href="http://www.itet.info">这就是linkText<a>,这里**[这就是linkText]** 便是这个链接的linkText,partialLinkText指的是部分的链接文本,如果链接的文本过长的时候,使用partialLinkText会起到简化代码的作用。

目的

  • 熟悉selenium webdriver 定位方式
  • 学会通过linkText和partialLinkText属性去定位元素
  • 学会使用getAttribute()方法获取html元素的属性
  • 学会使用then()方法传入回调函数来搞定Thenable的Promise

练习对象

我们使用html5-test-page作为我们的练习对象。

将html代码拷贝一份并保存到本地,文件名为index.html

场景

定位下面html代码所示的a元素,并打印这些元素的href属性

<ul>
  <li><a href="#text__headings">Headings</a></li>
  <li><a href="#text__paragraphs">Paragraphs</a></li>
  <li><a href="#text__blockquotes">Blockquotes</a></li>
  <li><a href="#text__lists">Lists</a></li>
  <li><a href="#text__hr">Horizontal rules</a></li>
  <li><a href="#text__tables">Tabular data</a></li>
  <li><a href="#text__code">Code</a></li>
  <li><a href="#text__inline">Inline elements</a></li>
</ul>

代码

var path = require('path');
var webdriver = require('selenium-webdriver'),
  By = webdriver.By;

var testFile = "file://" + path.join(__dirname,  "index.html");

var dr = new webdriver.Builder().forBrowser('chrome').build();
dr.get(testFile);

dr.findElement(By.linkText('Headings')).getAttribute('href').then(function(href) {
  console.log(href);
});

dr.findElement(By.linkText('Paragraphs')).getAttribute('href').then(function(href) {
  console.log(href);
});

dr.findElement(By.linkText('Blockquotes')).getAttribute('href').then(function(href) {
  console.log(href);
});

dr.findElement(By.linkText('Lists')).getAttribute('href').then(function(href) {
  console.log(href);
});

dr.findElement(By.linkText('Horizontal rules')).getAttribute('href').then(function(href) {
  console.log(href);
});

dr.findElement(By.linkText('Tabular data')).getAttribute('href').then(function(href) {
  console.log(href);
});

dr.findElement(By.linkText('Code')).getAttribute('href').then(function(href) {
  console.log(href);
});

dr.findElement(By.partialLinkText('Inline')).getAttribute('href').then(function(href) {
  console.log(href);
});

dr.quit();

运行结果

xxxx代表你的本机index.html的路径


file://xxxx/index.html#text__headings
file://xxxx/index.html#text__paragraphs
file://xxxx/index.html#text__blockquotes
file://xxxx/index.html#text__lists
file://xxxx/index.html#text__hr
file://xxxx/index.html#text__tables
file://xxxx/index.html#text__code
file://xxxx/index.html#text__inline

总结

如果你不熟悉Promise,那么上面的代码是有点难以理解的。

getAttribute 方法返回了Thenable的实例,Thenable跟Promise很像,我们可以使用then()方法来传入回调,表示当异步过程成功结束的时候进行调用。

原始封面

https://images.unsplash.com/photo-1509515837298-2c67a3933321?w=300