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