Cypress测试用例（中文文档）
e2e测试实例：
测试地址：https://example.cypress.io/commands/actions
官方项目：https://github.com/cypress-io/cypress-example-kitchensink
1.actions.spec.js
/// <reference types="Cypress" /> context('Actions', () => { // 访问线上网站 beforeEach(() => { cy.visit('https://example.cypress.io/commands/actions') }) // https://on.cypress.io/interacting-with-elements it('.type() - 表单输入', () => { // 判断输入：邮件 cy.get('.action-email') .type('111@email.com').should('have.value', '111@email.com') // 输入类型： 特殊字符序列 .type('{leftarrow}{rightarrow}{uparrow}{downarrow}') .type('{del}{selectall}{backspace}') // 输入类型： 关键修饰符:这些是等效的 .type('{alt}{option}') //these are equivalent .type('{ctrl}{control}') //these are equivalent .type('{meta}{command}{cmd}') //these are equivalent .type('{shift}') // 输入类型：将每次按键延迟0.1秒 .type('每次按键延迟0.1秒', { delay: 100 }) .should('have.value', '每次按键延迟0.1秒') // 获取焦点后输入 cy.get('.action-disabled') .type('键入之前忽略错误检查', { force: true }) .should('have.value', '键入之前忽略错误检查') }) it('.focus() - 获取焦点', () => { // 获取焦点：判断是否表成黄色样式 cy.get('.action-focus').focus() .should('have.class', 'focus') .prev().should('have.attr', 'style', 'color: orange;') }) it('.blur() - 失去焦点', () => { // 失去焦点是否变成红色边框 cy.get('.action-blur').type('About to blur').blur() .should('have.class', 'error') .prev().should('have.attr', 'style', 'color: red;') }) it('.clear() - 清空内容', () => { // 清空内容判断是否为空 cy.get('.action-clear').type('清空内容判断是否为空') .should('have.value', '清空内容判断是否为空') .clear() .should('have.value', '') }) it('.submit() - 表单提交', () => { // 找到指定输入内容：提交 cy.get('.action-form') .find('[type="text"]').type('HALFOFF') cy.get('.action-form').submit() .next().should('contain', 'Your form has been submitted!') }) it('.click() - 点击', () => { // https://on.cypress.io/click cy.get('.action-btn').click() // You can click on 9 specific positions of an element: // ----------------------------------- // | topLeft top topRight | // | | // | | // | | // | left center right | // | | // | | // | | // | bottomLeft bottom bottomRight | // ----------------------------------- // 获取画布：在不同位置进行点击 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') // 获取画布坐标进行点击 // that controls where the click occurs :) cy.get('#action-canvas') .click(80, 75) // click 80px on x coord and 75px on y coord .click(170, 75) .click(80, 165) .click(100, 185) .click(125, 190) .click(150, 185) .click(170, 165) // 通过传递多个元素来单击多个元素：true cy.get('.action-labels>.label').click({ multiple: true }) // 单击之前忽略错误检查 cy.get('.action-opacity>.btn').click({ force: true }) }) // 双击 it('.dblclick() -双击', () => { // https://on.cypress.io/dblclick // Our app has a listener on 'dblclick' event in our 'scripts.js' // that hides the div and shows an input on double click cy.get('.action-div').dblclick().should('not.be.visible') cy.get('.action-input-hidden').should('be.visible') }) it('.check() - 多选', () => { // https://on.cypress.io/check // 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') }) it('.uncheck() - 取消选中', () => { // https://on.cypress.io/uncheck // 默认情况下，.uncheck（）将取消选中所有匹配项 // 一个接一个的复选框元素 cy.get('.action-check [type="checkbox"]') .not('[disabled]') .uncheck().should('not.be.checked') // .uncheck() 接受1个值参数：'checkbox1' cy.get('.action-check [type="checkbox"]') .check('checkbox1') .uncheck('checkbox1').should('not.be.checked') // .uncheck() 接受一个数组：['checkbox1', 'checkbox3'] cy.get('.action-check [type="checkbox"]') .check(['checkbox1', 'checkbox3']) .uncheck(['checkbox1', 'checkbox3']).should('not.be.checked') // 取消检查之前忽略错误检查 cy.get('.action-check [disabled]') .uncheck({ force: true }).should('not.be.checked') }) it('.select() - 下拉选择', () => { // https://on.cypress.io/select // 选择具有匹配文本内容的选项：label cy.get('.action-select').select('apples') cy.get('.action-select-multiple') .select(['apples', 'oranges', 'bananas']) // 选择具有匹配值的选项：value cy.get('.action-select').select('fr-bananas') cy.get('.action-select-multiple') .select(['fr-apples', 'fr-oranges', 'fr-bananas']) }) it('.scrollIntoView() - 调整滚动条位置', () => { // https://on.cypress.io/scrollintoview //通常所有这些按钮都是隐藏的， //因为它们不在 //父母的可见区域 //（我们需要滚动才能看到它们） cy.get('#scroll-horizontal button') .should('not.be.visible') // 将按钮滚动到视图中，就像用户已经滚动一样 cy.get('#scroll-horizontal button').scrollIntoView() .should('be.visible') cy.get('#scroll-vertical button') .should('not.be.visible') // 处理所需的滚动方向 cy.get('#scroll-vertical button').scrollIntoView() .should('be.visible') cy.get('#scroll-both button') .should('not.be.visible') // 向右和向下滚动 cy.get('#scroll-both button').scrollIntoView() .should('be.visible') }) it('.trigger() - 进度条触发位置', () => { // https://on.cypress.io/trigger //与范围输入（滑块）交互 //我们需要设置其值并触发 //事件以表示已更改 //在这里，我们调用jQuery的val（）方法进行设置 //该值并触发'change'事件 cy.get('.trigger-input-range') .invoke('val', 25) .trigger('change') .get('input[type=range]').siblings('p') .should('have.text', '25') }) it('cy.scrollTo() - 滚动到指定方位', () => { // https://on.cypress.io/scrollTo // You can scroll to 9 specific positions of an element: // ----------------------------------- // | topLeft top topRight | // | | // | | // | | // | left center right | // | | // | | // | | // | bottomLeft bottom bottomRight | // ----------------------------------- // 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 }) }) })
