最近很多小伙伴都在问Cypress系列和24-操作页面元素的命令这两个问题，那么本篇文章就来给大家详细解答一下，同时本文还将给你拓展Cypressweb自动化4-操作页面元素(Actions行为事件)

最近很多小伙伴都在问Cypress系列和24- 操作页面元素的命令这两个问题，那么本篇文章就来给大家详细解答一下，同时本文还将给你拓展Cypress web自动化4-操作页面元素(Actions行为事件)、Cypress系列（15）- Cypress 元素定位选择器、Cypress系列（16）- 查找页面元素的基本方法、Cypress系列（17）- 查找页面元素的辅助方法等相关知识，下面开始了哦！

• Cypress系列（24）- 操作页面元素的命令（页面元描述）
• Cypress web自动化4-操作页面元素(Actions行为事件)
• Cypress系列（15）- Cypress 元素定位选择器
• Cypress系列（16）- 查找页面元素的基本方法
• Cypress系列（17）- 查找页面元素的辅助方法

Cypress系列（24）- 操作页面元素的命令（页面元描述）

如果想从头学起Cypress，可以看下面的系列文章哦

https://www.cnblogs.com/poloyy/category/1768839.html

点击命令可以跳转到命令详解的文章哦

结尾

我的博客即将同步至腾讯云+社区，邀请大家一同入驻：https://cloud.tencent.com/developer/support-plan?invite_code=12vd92hxgwgj1

Cypress web自动化4-操作页面元素(Actions行为事件)

ui自动化操作页面上的元素，常用的方法就那么几个，输入文本，点击元素，清空文本，点击按钮。
还有一些特殊的checkBox,radio,滚动条等。

往输入框输入文本元素

Email addressdisabled Textarea

cy.get('.action-email')
  .type('fake@email.com').should('have.value', 'fake@email.com')

  // .type() with special character sequences
  .type('{leftarrow}{rightarrow}{uparrow}{downarrow}')
  .type('{del}{selectall}{backspace}')

  // .type() with key modifiers
  .type('{alt}{option}') //these are equivalent
  .type('{ctrl}{control}') //these are equivalent
  .type('{Meta}{command}{cmd}') //these are equivalent
  .type('{shift}')

  // Delay each keypress by 0.1 sec
  .type('slow.typing@email.com', { delay: 100 })
  .should('have.value', 'slow.typing@email.com')

cy.get('.action-disabled')
  // Ignore error checking prior to type
  // like whether the input is visible or disabled
  .type('disabled error checking', { force: true })
  .should('have.value', 'disabled error checking')

要聚焦DOM元素，请使用.focus（）命令

Password

cy.get('.action-focus').focus()
  .should('have.class', 'focus')
  .prev().should('have.attr', 'style', 'color: orange;')

判断输入框失去焦点时候，按钮的颜色

Full Name

cy.get('.action-blur').type('About to blur').blur()
  .should('have.class', 'error')
  .prev().should('have.attr', 'style', 'color: red;')

清空DOM元素

cy.get('.action-clear').type('Clear this text')
  .should('have.value', 'Clear this text')
  .clear()
  .should('have.value', '')

提交form表单

Coupon CodeSubmit

cy.get('.action-form')
  .find('[type="text"]').type('HALFOFF')
cy.get('.action-form').submit()
  .next().should('contain', 'Your form has been submitted!')

点击DOM元素

cy.get('.action-btn').click()

// clicking in the center of the element is the default
cy.get('#action-canvas').click()

cy.get('#action-canvas').click('topLeft')
cy.get('#action-canvas').click('top')
cy.get('#action-canvas').click('topRight')
cy.get('#action-canvas').click('left')
cy.get('#action-canvas').click('right')
cy.get('#action-canvas').click('bottomLeft')
cy.get('#action-canvas').click('bottom')
cy.get('#action-canvas').click('bottomright')

// .click() accepts a an x and y coordinate
// that controls where the click occurs :)
cy.get('#action-canvas')
  .click(80, 75)
  .click(170, 75)
  .click(80, 165)
  .click(100, 185)
  .click(125, 190)
  .click(150, 185)
  .click(170, 165)

// click multiple elements by passing multiple: true
cy.get('.action-labels>.label').click({ multiple: true })

// Ignore error checking prior to clicking
cy.get('.action-opacity>.btn').click({ force: true })

双击 DOM 元素

cy.get('.action-div').dblclick().should('not.be.visible')
cy.get('.action-input-hidden').should('be.visible')

右击 DOM 元素

cy.get('.action-div').rightclick().should('not.be.visible')
                cy.get('.action-input-hidden').should('be.visible')

检查 checkBox or radio 选项框

// By default, .check() will check all
// matching checkBox or radio elements in succession, one after another
cy.get('.action-checkBoxes [type="checkBox"]').not('[disabled]')
  .check().should('be.checked')

cy.get('.action-radios [type="radio"]').not('[disabled]')
  .check().should('be.checked')

// .check() accepts a value argument
cy.get('.action-radios [type="radio"]')
  .check('radio1').should('be.checked')

// .check() accepts an array of values
cy.get('.action-multiple-checkBoxes [type="checkBox"]')
  .check(['checkBox1', 'checkBox2']).should('be.checked')

// Ignore error checking prior to checking
cy.get('.action-checkBoxes [disabled]')
  .check({ force: true }).should('be.checked')

cy.get('.action-radios [type="radio"]')
  .check('radio3', { force: true }).should('be.checked')

检查checkBox or radio 未被选中

// By default, .uncheck() will uncheck all matching
// checkBox elements in succession, one after another
cy.get('.action-check [type="checkBox"]')
  .not('[disabled]')
  .uncheck().should('not.be.checked')

// .uncheck() accepts a value argument
cy.get('.action-check [type="checkBox"]')
  .check('checkBox1')
  .uncheck('checkBox1').should('not.be.checked')

// .uncheck() accepts an array of values
cy.get('.action-check [type="checkBox"]')
  .check(['checkBox1', 'checkBox3'])
  .uncheck(['checkBox1', 'checkBox3']).should('not.be.checked')

// Ignore error checking prior to unchecking
cy.get('.action-check [disabled]')
  .uncheck({ force: true }).should('not.be.checked')

select 选项框

--Select a fruit--applesorangesbananasapplesorangesbananas

// Select option(s) with matching text content
cy.get('.action-select').select('apples')

cy.get('.action-select-multiple')
.select(['apples', 'oranges', 'bananas'])

// Select option(s) with matching value
cy.get('.action-select').select('fr-bananas')

cy.get('.action-select-multiple')
  .select(['fr-apples', 'fr-oranges', 'fr-bananas'])

内嵌滚动条滑动,三种情况：左右滑动，上下滑动，同时可以左右上下滑动

Horizontal ScrollI'm HereVertical ScrollI'm HereBoth ScrollI'm Here

cy.get('#scroll-horizontal button')
  .should('not.be.visible')

// scroll the button into view, as if the user had scrolled
cy.get('#scroll-horizontal button').scrollIntoView()
  .should('be.visible')

cy.get('#scroll-vertical button')
  .should('not.be.visible')

// Cypress handles the scroll direction needed
cy.get('#scroll-vertical button').scrollIntoView()
  .should('be.visible')

cy.get('#scroll-both button')
  .should('not.be.visible')

// Cypress kNows to scroll to the right and down
cy.get('#scroll-both button').scrollIntoView()
  .should('be.visible')

浏览器自带的滚动条

// if you chain .scrollTo() off of cy, we will
// scroll the entire window
cy.scrollTo('bottom')

cy.get('#scrollable-horizontal').scrollTo('right')

// or you can scroll to a specific coordinate:
// (x axis, y axis) in pixels
cy.get('#scrollable-vertical').scrollTo(250, 250)

// or you can scroll to a specific percentage
// of the (width, height) of the element
cy.get('#scrollable-both').scrollTo('75%', '25%')

// control the easing of the scroll (default is 'swing')
cy.get('#scrollable-vertical').scrollTo('center', { easing: 'linear' })

// control the duration of the scroll (in ms)
cy.get('#scrollable-both').scrollTo('center', { duration: 2000 })

在DOM元素上触发事件

Range Input0

cy.get('.trigger-input-range')
  .invoke('val', 25)
  .trigger('change')
  .get('input[type=range]').siblings('p')
  .should('have.text', '25')

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

如果想从头学起Cypress，可以看下面的系列文章哦

https://www.cnblogs.com/poloyy/category/1768839.html

前言

• 做 UI 自动化测试，每个测试用例都会包含对元素的操作
• 健壮、可靠的元素定位策略可以保障测试成功率的提高
• 相对于其他测试框架来说，Cypress 提供了特别的定位策略，让你无须过多担心因定位失败而导致的测试失败

做元素定位时，你是否曾遇到过以下难题

• 元素 ID 或 class 是动态生成的
• 你使用了 CSS选择器去定位，但开发把元素CSS样式改掉了

这种情况下通常会测试失败

Cypress 如何解决上述难题

提供了 data-* 属性，包含了下面三个定位器

1. data-cy
2. data-test
3. data-testid

重点

• 它们都是 Cypress 专有的定位器，仅用来测试
•  data-* 属性和元素的行为或样式无关，意味着即使 CSS 样式或 JS 行为改变，也不会导致测试失败
• 注意：在实际项目中，需要自己将 data-* 属性加到元素中，意味着你得有权限修改代码

html 前端代码

测试文件代码

常规选择器

会点前端的童鞋应该都知道，在 css 里面怎么写， 这里就怎么写，敲简单 的啦

#id 选择器

通过元素的 id 属性来定位

cy.get("#main1").click()

.class 选择器

通过元素的 class 属性来定位

cy.get(".btn").click()

属性选择器

通过元素的各种属性来定位

cy.get("button[id='main2']").click()

:nth-child(n) 选择器

html 代码栗子

测试代码

cy.get("ul>li:nth-child(2)").click()

Cypress.$定位器

针对难以用普通方式定位的元素，Cypress 还提供了 JQuery 选择器（对我来说简直是福音）

格式： Cypress.$(selector) 

Cypress.$('#main2')
// 等价于
cy.get('#main2')

拓展

对于更多的 css 选择器写法，可以看看这篇文章：https://www.cnblogs.com/poloyy/p/12629662.html

只需要关注选择器那一列就好啦

结尾

本文是博主基于对蔡超老师的《Cypress 从入门到精通》阅读理解完后输出的博文，并附上了自己的理解

对书籍感兴趣的，大家可以参考本篇博客：https://www.cnblogs.com/poloyy/p/13052972.html，考虑自身需求进行购买

我的博客即将同步至腾讯云+社区，邀请大家一同入驻：https://cloud.tencent.com/developer/support-plan?invite_code=12vd92hxgwgj1

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

如果想从头学起Cypress，可以看下面的系列文章哦

https://www.cnblogs.com/poloyy/category/1768839.html

前端页面代码

后面写的 Cypress 代码，都会基于这个 html 页面来定位元素哦，文件位置随意放，代码需要手动自己敲一遍

.get(selector)

该用法用来在 DOM 树中查找 selector 对应的 DOM 元素

两种语法格式

// 以选择器定位
cy.get(selector)

 以别名定位，后续会讲到
cy.get(alias)

简单的栗子

测试结果

如果可以匹配多个元素，则返回多个元素

.find(selector)

该定位方法用来在 DOM 树中搜索已被定位到的元素的后代，并将匹配到的元素返回为一个新的 jQuery 对象【注意，不是返回元素对象】

实际栗子-测试文件代码

测试结果

解析错误信息（重点，懂了这个就不会再犯同样的错误了）

• 英文：A child command must be chained after a parent because it operates on a prevIoUs subject
• 中文：子命令需要链接到父命令之后，因为他需要作用于上一个对象
• 通俗理解：需要找到元素才能对元素执行某些命令【针对元素的操作】
• 重点：很多命令都需要通过元素去调用的，所以需要先定位到元素，才能调用那些命令，否则元素都没有，怎么操作元素呢

.contains()

该方法可用来获取包含指定文本的 DOM 元素

两种语法格式

.contains(content)
.contains(selector,content)

实际栗子-测试文件代码

测试代码

重点：只会返回第一个匹配到的元素

结尾

本文是博主基于对蔡超老师的《Cypress 从入门到精通》阅读理解完后输出的博文，并附上了自己的理解

对书籍感兴趣的，大家可以参考本篇博客：https://www.cnblogs.com/poloyy/p/13052972.html，考虑自身需求进行购买

我的博客即将同步至腾讯云+社区，邀请大家一同入驻：https://cloud.tencent.com/developer/support-plan?invite_code=12vd92hxgwgj1

Cypress系列（17）- 查找页面元素的辅助方法

如果想从头学起Cypress，可以看下面的系列文章哦

https://www.cnblogs.com/poloyy/category/1768839.html

前言

单一的基础定位元素方法并不一定能满足复杂的场景，所以 Cypress 还提供了一些辅助方法，可以提高找到元素的准确性

前端页面代码

后面写的 Cypress 代码，都会基于这个 html 页面来定位元素哦，文件位置随意放，代码需要手动自己敲一遍

.children()

用来获取 DOM 元素的子元素

两种语法格式

.children()
.children(selector)

测试文件代码

测试结果

ul 标签的子元素有四个 li，所以返回了四个 DOM 元素

.parents()

用来获取 DOM 元素的所有父元素，包括了爷爷级别、祖父级别....

测试文件代码

测试结果

li 的父元素（父亲、爷爷、祖父....）一共有四个：ul > div > body > html

.parent()

用来获取 DOM 元素的第一层父元素

测试文件代码

测试结果

li 的第一层父亲是 ul，所以只返回它

.siblings()

用来获取 DOM 元素的所有同级元素

测试文件代码

测试结果

li 的同级元素有其他三个 li 元素

.first()

• 匹配给定的 DOM 元素列表中的第一个元素
• 重点：如果是单个 DOM 元素调用此方法，则返回自己

测试文件代码

测试结果

.last()

• 匹配给定的 DOM 元素列表中的最后一个元素
• 重点：如果是单个 DOM 元素调用此方法，则返回自己

测试文件代码

测试结果

next家族

.next()

获取给定的 DOM 元素后面紧跟的下一个同级元素

.nextAll()

获取给定的 DOM 元素所有同级元素

.nextUntil(selector)

获取给定的 DOM 元素所有同级元素，直到遇到 Until 里定义的元素为止

测试文件代码

测试结果

next() 测试结果

nextAll() 测试结果

nextUntil() 测试结果

prev家族

.prev()

获取给定的 DOM 元素前面紧跟的上一个同级元素

.prevAll()

获取给定的 DOM 元素前面紧跟的所有同级元素

.prevUntil()

 获取给定的 DOM 元素前面紧跟的所有同级元素，直到遇到 Until 里定义的元素为止

测试文件代码

测试结果

prev() 测试结果

prevAll() 测试结果

prevUntil() 测试结果

.each()

 用来遍历数据或者及其类似的结构（对象有 length 属性即可）

语法格式

.each(callbackFn)

测试文件代码

注意： $li 是一个变量名，每次循均代表一个 jQuery 对象

测试结果

.eq()

• 在元素或者数组中的特点索引处获取 DOM 元素
• 作用跟 :nth-child() 选择器一样，只不过下标从0开始

测试文件代码

测试结果

.closest()

https://www.cnblogs.com/poloyy/p/14010281.html

结尾

本文是博主基于对蔡超老师的《Cypress 从入门到精通》阅读理解完后输出的博文，并附上了自己的理解

对书籍感兴趣的，大家可以参考本篇博客：https://www.cnblogs.com/poloyy/p/13052972.html，考虑自身需求进行购买

我的博客即将同步至腾讯云+社区，邀请大家一同入驻：https://cloud.tencent.com/developer/support-plan?invite_code=12vd92hxgwgj1

关于Cypress系列和24- 操作页面元素的命令的问题就给大家分享到这里，感谢你花时间阅读本站内容，更多关于Cypress web自动化4-操作页面元素(Actions行为事件)、Cypress系列（15）- Cypress 元素定位选择器、Cypress系列（16）- 查找页面元素的基本方法、Cypress系列（17）- 查找页面元素的辅助方法等相关知识的信息别忘了在本站进行查找喔。