一.通过jquery选择器查询
我们知道Jquery作为前端经典框架,也有查询元素的功能,那么两者有啥相似和不同之处呢?
1.相似:
如果使用过Jquery,如果想通过类选择器查询元素,代码如下:
$('.my-selector')
在Cypress里通过类查询同样的元素,代码如下
cy.get('.my-selector')
是不是看起来很像,实际上,Cypress捆绑了JQuery,并提供了很多JQuery的DOM遍历方法,因此可以使用熟悉的API轻松处理复杂的HTML结构。我们可以通过jquery常见的选择器猜出Cypress的元素查询api,比如
(1)id选择器
cy.get('#main-content')
(2)属性塞选
cy.get('img[src^="/static"]')
等等。
2.不同
与jquery选择器查询返回的结果处理不同
// 正确, jQuery 会同步返回查询到的元素.
const $jqElement = $('.element')
// 这将不能运行! Cypress 不会同步返回查询到的元素.
const $cyElement = cy.get('.element')
当jQuery使用某种选择器找不到任何匹配的DOM元素时会发生什么
它会立马同步返回一个空的jQuery集合,不包含我们要找的元素就立马结束了,不会去重试查询,如果有时候页面没有完全加载出来去查询结果里面返回为空,但是实际页面上又有这个元素,这明显不符合我们ui自动化的需求,如果需要用jquery去满足我们的需求,就得修改jquery代码如下
// $() 立即返回一个空集合.
const $myElement = $('.element').first()
//dosomething重试查询方法
if ($myElement.length) {
doSomething($myElement)
}
太过复杂繁琐
当Cypress无法从其选择器中找到任何匹配的DOM元素时,会发生什么
1.自动重试查询,知道找到该元素
2.自动重试查询,直到超过设置的超时时间结束
这使Cypress具有强大的功能,不会像selenium等ui自动化框架一样,找不到元素直接抛错,需要我们手动写代码处理异常
注:在Cypress中,当您想直接与DOM元素交互时,可以使用.then()将元素作为其第一个参数的回调函数进行调用。如果您不想要重试功能,还是想要同步立马返回结果,你可以使用Cypress.$
二.通过文字内容查询
除了通过jquery的选择器来查询元素,我们还可以方便的通过前端控件里的文件内容来查询,比如我们下面的元素
<a class="toindex" href="/">百度首页</a>
我们可以很方便的通过内容来查询获得,代码如下
cy.contains('百度首页')
这是不是很方便,当我们不知道控件的css,属性等信息时,照样可以轻松定位到。
三.查询元素设置超时时间
上面提到了,当缺少元素时,Cypress并不会立马返回失败而是继续重试,那么我们如何设置查找元素的超时时间呢?代码如下
//设置超时时间为10s,这里的时间单位为毫秒
cy.get('.my-slow-selector', { timeout: 10000 })
您还可以通过设置defaultCommandTimeout来设置全局设置超时时间,这个我们后面文章细说。
注:这里的超时也根据实际情况设置,不是越长越好,也不是越短越好,越长你找不到元素程序时间过长,短了你可能来不及加载元素就已经报超时了。