[Cypress] install, configure, and script Cypress for JavaScript web applications -- part4
Load Data from Test Fixtures in Cypress
When creating integration tests with Cypress, we’ll often want to stub network requests that respond with large datasets. All of this mock data can lead to test code that is hard to read. In this lesson, we’ll see how to use fixtures to keep sample data in files and easily load it on demand in your tests.
If we load test data from the 'it', it is not a clean way, we should do it in fixtures:
// NOT describe('App initialization', () => { it('Displays todos from API on load', () => { cy.server() cy.route('GET', '/api/todos', [ {id: 1, name: 'One', iscomplete: false}, {id: 2, name: 'Two', iscomplete: false}, {id: 3, name: 'Three', iscomplete: false}, {id: 4, name: 'Four', iscomplete: false}, ]) cy.visit('/') cy.get('.todo-list li').should('have.length', 4) }) })
In fixtures folder, to createa new json file called: todos.json:
[ {"id": 1, "name": "One", "iscomplete": false}, {"id": 2, "name": "Two", "iscomplete": false}, {"id": 3, "name": "Three", "iscomplete": false}, {"id": 4, "name": "Four", "iscomplete": false}, ]
Use it:
describe('App initialization', () => { it('Displays todos from API on load', () => { cy.server() cy.route('GET', '/api/todos', 'fixture:todos') cy.visit('/') cy.get('.todo-list li').should('have.length', 4) }) })
Wait for XHR Responses in a Cypress Test
When testing interactions that require asynchronous calls, we’ll need to wait on responses to make sure we’re asserting about the application state at the right time. With Cypress, we don’t have to use arbitrary time periods to wait. In this lesson, we’ll see how to use an alias for a network request and wait for it to complete without having to wait longer than required or guess at the duration.
describe('App initialization', () => { it('Displays todos from API on load', () => { cy.server() cy.route('GET', '/api/todos', 'fixture:todos').as('load') cy.visit('/') cy.wait('@load') cy.get('.todo-list li').should('have.length', 4) }) })
Interact with Hidden Elements in a Cypress Test
We often only show UI elements as a result of some user interaction. Cypress detects visibility and by default won’t allow your test to interact with an element that isn’t visible. In this lesson, we’ll work with a button that is shown on hover and see how you can either bypass the visibility restriction or use Cypress to update the state of your application, making items visible prior to interacting with them
cy.get('.todo-list li') .first() .find('.destroy') .invoke('show') .click() })
Create Aliases for DOM Elements in Cypress Tests
We’ll often need to access the same DOM elements multiple times in one test. Your first instinct might be to use cy.get
and assign the result to a variable for reuse. This might appear to work fine at first, but can lead to trouble. Everything in Cypress is done asynchronously and you’re interacting with an application’s DOM, which is changing as your tests interact with it. In this lesson, we’ll see how we can reference DOM elements in multiple places with the alias feature in Cypress.
describe('List Item Behavior', () => { it('Deletes an item', () => { cy.server() cy... cy.seedAndVisit() cy.get('.todo-list li') .first() .find('.destroy') .invoke('show') .click() cy.wait('@delete') cy.get('.todo-list li') .should('have.length', 3) }) })
We be DRY, we can create alias for DOM element:
cy.get('.todo-list li') .as('list')
cy.get('@list') .first() .find('.destroy') .invoke('show') .click() cy.wait('@delete') cy.get('@list') .should('have.length', 3)
Test Variations of a Feature in Cypress with a data-driven Test
Many applications have features that can be used with slight variations. Instead of maintaining multiple tests with nearly identical code, we can take advantage of the JavaScript runtime and use normal data structures and plain old JavaScript to test and make assertions for multiple interactions in a single test.
describe('Footer', () => { it('Filters todos', () => { const filters = [ {link: 'Active', expectedLength: 2}, {link: 'Completed', expectedLength: 2}, {link: 'All', expectedLength: 4} ] cy.seedAndVisit('fixture:mixed_todos') cy.wrap(filters) .each(filters => { cy.contains(filter.link).click() cy.get('.todo-list li').should('have.length', filter.expectedLength) }) }) })
相关文章
- 【Web Audio API】 — 那些年的 web audio
- JavaScript -- 注意点
- [Javascript] Link to Other Objects through the JavaScript Prototype Chain (Object.setPrototypeOf())
- [Web component] Using Custom Events as a web component API
- [Cypress] install, configure, and script Cypress for JavaScript web applications -- part2
- [Javascript] JavaScript Array Methods in Depth - push
- Nikto是一款Web安全扫描工具,可以扫描指定主机的web类型,主机名,特定目录,cookie,特定CGI漏洞,XSS漏洞,SQL注入漏洞等,非常强大滴说。。。
- JavaScript Web 应用最佳实践分析
- JavaScript中模块“写法”
- [Javascript] Understanding the difference between .prototype and .__proto__ in JavaScript
- [Javascript] Deep partial equal Object LooksLike
- [Javascript] Understanding the .constructor property on JavaScript Objects
- [Javascript] Compose multiple functions for new behavior in JavaScript
- 用尾递归(tailRecursive)实现的阶乘-JavaScript版本
- 强类型 JavaScript 的解决方案
- Atitit web 之道 艾龙著 Atitit web 之道 艾龙艾提拉著v2 saa.docx Atitit web开发之道 attilax著 Web应用 1. 第1章 Web编程基础知识 (
- 【华为OD机试 2022】 约瑟夫问题(C++ Java JavaScript Python)
- 【华为OD机试 2023】单词倒序(C++ Java JavaScript Python)
- JavaScript资源大全中文版(Awesome最新版)
- python web py入门(23)- javascript的减法
- python web py入门(26)- javascript的求余(取模)
- python web py入门(29)- javascript的赋值操作
- web前端框架Javascript开发基础之JavaScript作用域
- Fix:VectorDraw web library (javascript):10.1
- web前端Javascript开发学习之JavaScript中的预编译如何进行
- web前端框架Javascript开发基础之JavaScript作用域