Cypress（四）查询元素

一.通过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来设置全局设置超时时间，这个我们后面文章细说。

注：这里的超时也根据实际情况设置，不是越长越好，也不是越短越好，越长你找不到元素程序时间过长，短了你可能来不及加载元素就已经报超时了。