RobotFramework测试问题三：元素不能定位问题二（css 伪元素）

元素不能定位问题二（css 伪元素）

一、元素定位（jquery）

A. Execute Javascript + querySelector
B. Execute Javascript + querySelectorAll

二、用例：元素显示“试听/还未购买”或者“立即学习/重新学习”

1. 登录，搜索课程
2. 进入“课程详情”
3. 点击“课程大纲”
4. 随机查询，未购买用户显示“试听/还未购买”；已购买用户显示“立即学习/重新学习”。

元素显示的内容“试听”或者“立即学习”，在 css 的伪元素中，定位不到。xpath 方法的相对和绝对路径都无法定位。

:FOR    ${i}   IN RANGE    1   3
    ${content}	Get Text	xpath=//div[@class="cacc-kcdg-box"]/div[2]/ul/li[${index}]/a/div/span    

使用 jquery 定位 css 的伪元素：querySelector 和 querySelectorAll

querySelector 和 querySelectorAll 方法是 W3C Selectors API 规范中定义的。他们的作用是根据 CSS 选择器规范，便捷定位文档中指定元素。
目前几乎主流浏览器均支持了他们。包括 IE8(含) 以上版本、 Firefox、 Chrome、Safari、Opera。

querySelector 和 querySelectorAll 在规范中定义了如下接口：

module dom { [Supplemental, NoInterfaceObject] interface NodeSelector { Element querySelector(in DOMString selectors); NodeList querySelectorAll(in DOMString selectors); }; Document implements NodeSelector; DocumentFragment implements NodeSelector; Element implements NodeSelector; };

从接口定义可以看到Document、DocumentFragment、Element都实现了NodeSelector接口。即这三种类型的元素都拥有者两个方法。querySelector和querySelectorAll的参数须是符合 css selector 的字符串。不同的是querySelector返回的是一个对象，querySelectorAll返回的一个集合(NodeList)。

因为用例要求随机显示，而 querySelector 只返回的是一个对象，即第一个元素，所以需要 querySelectorAll 返回一个集合(NodeList)。
Firebug 下，调试命令：
window.getComputedStyle(document.querySelector(‘.caccb-kcdg-play’),’:after’).getPropertyValue(‘content’);
window.document.querySelectorAll(‘.caccb-kcdg-play’);

querySelectorAll 显示其中一个元素（节点 NodeList 从 “0”开始）：
window.getComputedStyle(document.querySelectorAll(‘.caccb-kcdg-play’)[1],’:after’).getPropertyValue(‘content’);

RobotFramework 的实现：

# Only the first Node
${node0}   Execute Javascript  return window.getComputedStyle(document.querySelector('.caccb-kcdg-play'),':after').getPropertyValue('content');

# The second Node of NodeList
${node1}   Execute Javascript  return window.getComputedStyle(document.querySelectorAll('.caccb-kcdg-play')[1],':after').getPropertyValue('content');      

# The first three Nodes of NodeList 
:FOR    ${i}   IN RANGE    0   3
    ${content}	Execute Javascript	return window.getComputedStyle(document.querySelectorAll('.caccb-kcdg-play')[${i}],':after').getPropertyValue('content');

未登陆状态下显示的结果