在Cypress中使用cy.get()搜索具有以下两个属性之一的选择器 - 腾讯云开发者社区

文章/答案/技术大牛

发布

前端自动化测试框架cypress

在测试金字塔模型中，UI层测试是各种测试中投入最大、收益最低、运行最慢的一种。...但是在cypress中，是自动等待的，直到元素出现，或者超过了你设置的超时时间。环境安装：快速安装。没有服务器，驱动程序，或任何其他依赖需要安装或配置。...Cypress的局限 1、长期权衡不建议使用Cypress用于网络爬虫，性能测试之目的。 Cypress永远不会支持多标签测试。 Cypress不支持同时打开两个及以上的浏览器。...属性选择器 cy.get('[input[id = "account"]]').click() :nth-child(n)选择器 cy.get(tbody > tr:nth-child(1) > th...$('#account') // 等价于 cy.get('#account') Cypress 页面元素基本操作方式 // 搜索定位元素 .get(selector) // 搜索定位元素 .

2.7K4 0

Cypress 元素定位

前言 Cypress含有多种定位方式我们无需担心因为定位导致测试失败，Cypress有独一无二的定位策略能使你摆脱元素定位的噩梦。...#id选择器通过html元素id属性来获取DMO 获取用户名input元素方法： cy.get('#account').click() class类选择器类选择器通过html元素class属性来获取...DMO 获取用户名input元素方法： cy.get('.form-control').click() attributes属性选择器类选择器通过html元素class属性来获取DMO 获取用户名input...获取用户名DOM元素方法： cy.get(tbody > tr:nth-child(1) > th') Cypress.$定位器 Cypress可以使用jQuery选择器定位 Cypress....$('#account') 等价于 cy.get('#account') ‍ 以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家的支持

1.5K3 1

您找到你想要的搜索结果了吗？

是的

没有找到

Cypress系列（15）- Cypress 元素定位选择器

健壮、可靠的元素定位策略可以保障测试成功率的提高相对于其他测试框架来说，Cypress 提供了特别的定位策略，让你无须过多担心因定位失败而导致的测试失败做元素定位时，你是否曾遇到过以下难题元素...ID 或 class 是动态生成的你使用了 CSS选择器去定位，但开发把元素CSS样式改掉了这种情况下通常会测试失败 Cypress 如何解决上述难题提供了 data-* 属性，包含了下面三个定位器...data-* 注意：在实际项目中，需要自己将属性加到元素中，意味着你得有权限修改代码 data-* html 前端代码 ?...常规选择器会点前端的童鞋应该都知道，在 css 里面怎么写，这里就怎么写，敲简单的啦 #id 选择器通过元素的 id 属性来定位 cy.get("#main1").click() .class...选择器通过元素的 class 属性来定位 cy.get(".btn").click() 属性选择器通过元素的各种属性来定位 cy.get("button[id='main2']").click()

1.9K4 0

Cypress（四）查询元素

1.相似：如果使用Jquery，想通过类选择器查询元素，代码如下： $('.my-selector') 在Cypress里通过类查询同样的元素，代码如下： cy.get('.my-selector')...我们可以通过jquery常见的选择器猜出Cypress的元素查询api,比如 (1)id选择器 cy.get('#main-content') (2)属性筛选 cy.get('img[src^="/static...Cypress 不会同步返回查询到的元素. const $cyElement = cy.get('.element') 当jQuery使用某种选择器找不到任何匹配的DOM元素时会发生什么？...注：在Cypress中，当您想直接与DOM元素交互时，可以使用.then()将元素作为其第一个参数的回调函数进行调用。...如果您不想要重试功能，想要同步立马返回结果，你可以使用Cypress.$ 二.通过文字内容查询除了通过jquery的选择器来查询元素，我们还可以方便的通过前端控件里的文件内容来查询，比如我们要查询下面的元素

2.1K2 0

Cypress学习笔记3——编写第一个测试脚本

引言　　前面已经说过Cypress是javascript语言写的，我这里使用pycharm编辑器和ST3进行编写js脚本。　　...，用css selector定位选择器　　　　5、type 输入文本　　　　6、should 断言，hava.value 是元素的value属性值，判断是否为‘yoyo’ 　　　　7、clear 清空文本...方式1 　　脚本编写完成后，现在就是运行，前面已经讲过怎么启动Cypress，这里使用ctrl+R→cmd，然后直接运行： npm run cypress:open 　　启动成功之后，你会看到之前的脚本...：　　直接点击baidu.js运行就是了　　两个断言都是Pass状态，表明该测试结果符合预期，这个简单的脚本已经完成。　　...运行脚本:方式2 　　上面运行方式是在dos下，那么我们使用pycharm，可以直接利用IDE进行启动，如图：　　总结　　这是一个极其简单的示例，有兴趣可以持续关注。

1.1K1 0

Cypress初步使用

一、简介 Cypress是新一代前端测试框架，它基于node js。解决了开发人员和QA工程师在测试现代应用程序时面临的关键难点问题。　　...功能特点【时间旅行】测试的每一步都有 snapshot，只需将鼠标悬停在命令日志中的命令上，就可以准确地查看每个步骤中发生了什么。...【自动等待】再也无需在测试用例代码中添加 wait 或 sleep 代码，Cypress 会自动等待命令和断言完成。【网络通信控制】无需涉及服务器即可控制、保存和测试边缘情况。...image 2）我们也可以自己新建一个测试文件： ①　首先切换至目录 ~\Cypress\cypress\integration（任意编辑器都可以，我使用的时PyCharm） ?...image ②　我们可以通过在cypress.json中指定这些值来覆盖默认视口维度 { “viewportWidth”：1200， “viewportHeight”：800 } 我们可以通过以下定位：

1.9K4 0

你不知道的Cypress系列（14） -- 一文说透元素定位

HTML元素的属性（例如类，字体颜色等） value：是你想要匹配的特定值关于这两种定位方式，网上一度有很多讨论和对比，但其实没那么玄乎，其差别就以下两点： 1....CSS选择器仅支持正向遍历DOM，而XPath定位支持正向或者反向遍历DOM。 2. XPath引擎在每个浏览器中都不同，同样的Locator（可能导致）定位到不同的元素。...这就是我说的定位可以无缝切换，你在Selenium里怎么定位，你就在Cypress里怎么定位。...如果是定位相关，在确定无法使用 1. data-cy 2. data-test 3. data-testid 这3个定位方式的情况下，直接按照Selenium定位的方式就行了。...定位时，首先采用不会更改的元素和属性（首选开发加了id的，次选CSS定位） 2. 避免使用文本，数字来定位（想想多语言和排序就知道为什么） 3.

2.3K3 0

Cypress学习2-pycharm写第一个脚本

以第一个百度页面搜索框为案例编写一个可以运行的脚本 pycharm导入工程上一篇新建的项目目录在D:\Cypress ?...pycharm - File - Open - D:\Cypress\cypress 导入项目 ? 在 setting 里面配置下 javascript 语言版本 ?...代码解释： describe 声明一个测试用例集 beforeEach 测试用例前置操作，相当于setup it声明了一个测试用例 cy.get 定位元素，用css selector定位选择器 type...输入文本 should 断言，hava.value 是元素的value属性值，判断是否为‘yoyo’ clear 清空文本 should 继续断言，文本框内容为空字符串运行脚本接着上一篇的，先cd...到项目目录，用npm启动cypress页面 D:\Cypress>npm run cypress:open 前面写的js脚本，这里会自动检测到 ?

1.3K1 0

Cypress学习11-定位元素(Querying)

前言 Cypress 是如何定位元素的呢？web自动化，定位元素是关键，见过很多学web自动化的小伙伴，一天到晚都停留在定位元素层面。...把大把的时间花在元素定位上，这就导致无法抽出精力去优化脚本，Cypress 的定位元素使用css 选择器，跟 jquery 的定位元素一样。...，请使用属性选择器进行查询。...（）方法来获取它的属性。...') .contains('Save Form') .should('have.class', 'btn') .within() 我们可以在特定的DOM元素中找到元素 <form class="

2.9K1 0

Cypress另类玩法！当爬虫和订票机器人

易于设置和使用：与其他自动化测试工具相比，Cypress 的安装和配置都相对简单。时间旅行：Cypress 记录下每一步操作的快照，可以回溯到测试的任何一个状态，方便查看问题发生的原因。...自动等待：Cypress 会自动等待命令和断言，无需手动添加等待时间。网络流量控制：可以拦截和控制应用的网络请求，模拟服务器响应，用于测试不同的场景。跨浏览器测试：支持在不同的浏览器环境中运行测试。...订票提示机器人为了演示，我们使用携程来做示范，但是仅仅提供一个思路，不代表具体可以按照这个方式去实施，大概的思路是：cypress 打开携程官方网站，你可以登录上自己的用户。.../ 选择日期等其他必要信息... // 提交搜索 cy.get('button').contains('搜索').click(); // 等待搜索结果 cy.wait(10000...总结Cypress ，不紧紧可以用来做自动化测试，他本质上就是根据用户编写的脚本去自动的执行网页上的一些操作，而且，正是因为 Cypress 还有一个很好的特性，可视化，也就是你可以很轻松的看到这个过程在自动执行

1K0 0

Cypress录制自动化脚本

使用Cypress Studio Cypress Studio是一个实验性功能，可以通过向配置文件添加experimentalStudio属性来启用(塞浦路斯.json默认情况下）。...---- 3.扩展测试您可以扩展任何先前存在的测试，也可以使用以下测试支架在您的默认情况下integrationFolder（cypress/integration在默认情况下）创建一个新测试来开始。...运行规范我们将使用Cypress Studio执行“新事务”用户旅程。首先，启动测试运行程序并运行在上一步中创建的规范。...生成的测试代码查看我们的测试代码，我们可以看到单击“ Save Commands”（保存命令）后更新了测试，并使用了我们在Cypress Studio中记录的操作。...image.png 最后，查看我们的测试代码，我们可以看到单击“ Save Commands”（保存命令）后更新了测试，并使用了我们在Cypress Studio中记录的操作。

3.1K3 2

Cypress系列（68）- request() 命令详解

包含以下属性 status body headers duration .request() 别名后通过 .get() 的返回值 ?...包含以下属性 status body headers duration statusText allRequestResponses requestHeaders redirects isOkStatusCode...}); }) 关于 .request() 的注意事项 Debugging 通过发出的请求不会出现在开发者工具（F12）网络一栏中 .request() Cypress 实际上并未从浏览器发出XHR请求...实际上是从 Cypress Test Runner（在Node中）发出HTTP请求因此，不会在开发人员工具中看到该请求 Cookie 通过发出的请求，Cypress 会自动发送和接收 Cookie....request() 在发送 HTTP 请求之前，如果请求来自浏览器，Cypress 会自动附加本应附加的 Cookie 此外，如果响应具有 Set-Cookie 标头，则这些标头将自动在浏览器 Cookie

1.4K2 0

Cypress必须掌握的一些核心概念

如果你对JQuery有一定的了解，在使用jquery查询元素是一般使用如下类似的代码: > $(".element-selector") 在Cypress里则同样的这样查询元素，代码如下： >...cy.get(".element-selector") 是不是很像，事实上，Cypress捆绑了JQuery，并提供了JQuery的许多DOM遍历方法，这样我们就可以使用熟悉的API处理复杂的...Cypress与JQuery的不同当JQuery无法从指定的选择器中查找到DOM元素时，会发生什么？...一般会返回一个空的JQuery集合，这是一个实际的对象，但不包含我们指定的元素，因此我们需要修改选择器才可能找到我们要的DOM元素当Cypress无法从指定的选择器中查找到DOM元素时，会发生什么？...对于Cypress而言，可能产生以下两种可能：一直找，直到找到该DOM元素超过默认或设置的超时时间了对于下selenium webdriver，当未找到指定的元素时，会抛出各种异常提示等，需要我们手动写代码来处理这些异常

1.2K1 0

Cypress系列（16）- 查找页面元素的基本方法

如果想从头学起Cypress，可以看下面的系列文章哦 https://www.cnblogs.com/poloyy/category/1768839.html 前端页面代码后面写的 Cypress 代码....get(selector) 该用法用来在 DOM 树中查找 selector 对应的 DOM 元素两种语法格式 // 以选择器定位 cy.get(selector) // 以别名定位，后续会讲到...cy.get(alias) 简单的栗子 ?...如果可以匹配多个元素，则返回多个元素 .find(selector) 该定位方法用来在 DOM 树中搜索已被定位到的元素的后代，并将匹配到的元素返回为一个新的 jQuery 对象【注意，不是返回元素对象...重点：只会返回第一个匹配到的元素结尾本文是博主基于对蔡超老师的《Cypress 从入门到精通》阅读理解完后输出的博文，并附上了自己的理解

1.5K3 0

Cypress学习6- Assertions断言使用(should, expect)

前言每个测试用例需要加断言，Cypress里面断言常用的有should, expect 隐式断言 .should() 可以使用.should()给当前用例加断言 should(‘have.class...’, ‘success’) 断言元素的class属性值是 ‘success’ should(‘have.text’, ‘Column content’) 断言元素文本值 ‘Column content’...should(‘have.html’, ‘Column content’) 断言元素html文本’Column content’ should(‘match’, ‘td’) chai-jquery 使用...“is()”检查元素是否与选择器匹配 .invoke(‘text’) .should(‘match’, /column content/i) 文本与正则表达式匹配先使用invoke结合should.../$ Cypress.

3.5K1 0

Cypress web自动化39-.trigger()常用鼠标操作事件

前言在web页面上经常遇到的鼠标事件有：鼠标悬停操作，鼠标右键，鼠标长按，拖拽等操作 trigger() trigger 方法用于在 DOM 元素上触发事件语法使用示例 .trigger(eventName...参数说明 eventName（字符串） event 在DOM元素上要触发的的名称。 position（字符串）应该触发事件的位置。该center位置是默认位置。...选项默认描述 log true 在命令日志中显示命令 force false 强制执行操作，禁用等待操作性 bubbles true 事件是否起泡 cancelable true 活动是否可取消 timeout...defaultCommandTimeout 等待超时.trigger()之前解决的时间您还可以任意事件属性（例如clientX，shiftKey），他们会被附加到事件。.../cypress-example-recipes/tree/master/examples/testing-dom__drag-drop 触发位置触发mousedown按钮右上方的 cy.get('button

3.6K3 0

Cypress简易入门教程

\cypress\integration\demo 3测试框架 before():相当于unittest中的def setUp(cls)方法或者Junit的@Before方法标签； after():相当于...unittest中的 def teardown(cls) 方法或者Junit的 @Before方法标签； beforeEach() : 相当于unittest中的def setUpClass(cls)...('input[name=wd]').type("软件测试") cy.get('#su').click() cy.get('title').should('contain','百度搜索...} }) }) // csrf在返回的html中,我测试的Django产品的CSRF token用这种方法 it('策略#1:从HTML解析令牌', function...(){ // 如果我们不能改变我们的服务器代码以使解析CSRF令牌变得更容易， // 我们可以简单地使用cy.request来获取登录页面，然后解析HTML内容 // 以找到嵌入在页面中的

6K2 0

Cypress安装与使用教程（3）—— 软测大玩家

接上回上一篇我们介绍了一些Cypress中的一些高频使用技巧，那么今天就由博主我继续来为大家带来关于Cypress的一些高阶技巧。 2....自定义命令在Cypress中，自定义命令是一个强大的辅助功能，说直白点就是它允许你将重复使用的代码片段抽象成可重用的命令。...我们先在commands.js中定义，这里我们要传递的参数是一个元素选择器。这样我们就可以灵活的在页面上选择到任何一个能捕捉到的元素。...在commands.js中定义，我们使用cy.wrap()将对象包装成Cypress对象，使用自带的日志命令。...下面我们来举两个例子：首先我们来看普通命令中的this，这里的this就是指向cy对象的。

8341 0

Cypress系列（6）- Cypress 的重试机制

Cypress 的核心概念之一，有助于我们写出更加健壮的测试命令和断言 Cypress 测试中经常被调用的两种类型，仍以前面说到的 testLogin.js 为栗子 ?...("contain", "jane.lane") 关于实际工作中的灵魂拷问现在的 web 应用基本都是异步的，如果出现以下情况又应该怎么处理呢？...，则该命令成功执行完成 cy.get() 命令之后的断言失败，则 cy.get() 命令会自动重新查询 web 应用程序的 DOM 树，然后 Cypress 将再次尝试对 cy.get() 返回的元素进行断言...Cypress 是全局的，不用针对元素去单独识别 Cypress 这种自动重试机制避免了在测试代码中编写硬编码等待（强制等待），使测试代码更加健壮多重断言在日常测试中，有时候需要多重断言，即获取元素后跟多个断言...在多重断言中，Cypress 将按顺序进行断言，即当第一个断言通过后，会进行第二个断言，通过后进行第三个断言...以此类推列表的栗子需求假设一个下拉列表，存在两个选项，第一个选项是“iTesting

2.5K1 0

你不知道的Cypress系列（3） -- 是时候重构自己的思维了！

在跟同学们的交流中，我也了解到，原来除了国外优秀的公司(例如Adobe, 迪士尼，AutoDesk等等），国内也有很多公司在尝试使用Cypress提升测试效率。...在Cypress中国群内、在公众号iTesting里，我每天都能看到大量关于Cypress的使用讨论和私下问询。这让我感到无比荣幸。...由于Selenium/WebDriver的“荼毒”，当前在自动化过程中，很多不合理的操作，反而都变成了标准流程。例如，要进行元素属性值比较，我们首先想到的就是先赋值，再比较。...在Cypress中，99%的操作都无须赋值！...') assert value == "iTesting" Cypress： //获取元素的属性值，并比较 cy.get('#kw').should('have.text', 'iTesting')

2.7K2 0

点击加载更多

前端自动化测试框架cypress

Cypress 元素定位

Cypress系列（15）- Cypress 元素定位选择器

Cypress（四）查询元素

Cypress学习笔记3——编写第一个测试脚本

Cypress初步使用

你不知道的Cypress系列（14） -- 一文说透元素定位

Cypress学习2-pycharm写第一个脚本

Cypress学习11-定位元素(Querying)

Cypress另类玩法！当爬虫和订票机器人

Cypress录制自动化脚本

Cypress系列（68）- request() 命令详解

Cypress必须掌握的一些核心概念

Cypress系列（16）- 查找页面元素的基本方法

Cypress学习6- Assertions断言使用(should, expect)

Cypress web自动化39-.trigger()常用鼠标操作事件

Cypress简易入门教程

Cypress安装与使用教程（3）—— 软测大玩家

Cypress系列（6）- Cypress 的重试机制

你不知道的Cypress系列（3） -- 是时候重构自己的思维了！

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐