[Cypress] install, configure, and script Cypress for JavaScript web applications -- part3
Use custom Cypress command for reusable assertions
We’re duplicating quite a few commands between the registration and login of our user for assertions. Let’s see how we can take these assertions and create a custom command to make the assertions.
We have the tests:
it('should register a new user', () => {
cy.createUser().then(user => {
cy.visit('/')
.getByText(/login/i)
.click()
.getByLabelText(/username/i)
.type(user.username)
.getByLabelText(/password/i)
.type(user.password)
.getByText(/submit/i)
.click() // verify the user in localStorage
.url()
.should('eq', `${Cypress.config().baseUrl}/`)
.window()
.its('localStorage.token')
.should('be.a', 'string')
.getByTestId('username-display', {timeout: 500})
.should('have.text', user.username)
})
});
We can create some assertions commands to make it more reusable:
Cypress.Commands.add('assertHome', () => {
cy.url().should('eq', `${Cypress.config().baseUrl}/`)
}) Cypress.Commands.add('assertLoggedInAs', user => {
cy
.window()
.its('localStorage.token')
.should('be.a', 'string')
.getByTestId('username-display', {timeout: 500})
.should('have.text', user.username)
})
Then we can improve the test:
it('should register a new user', () => {
cy.createUser().then(user => {
cy.visit('/')
.getByText(/login/i)
.click()
.getByLabelText(/username/i)
.type(user.username)
.getByLabelText(/password/i)
.type(user.password)
.getByText(/submit/i)
.click()
.assertHome()
.assertLoggedInAs(user);
})
});
Run tests as an authenticated user with Cypress
For most applications you’re going to need to be logged in as a user to interact with the application. Let’s see how we can register as a new user and login as that user to test using the application as a logged in user.
Sometime you want to check some DOM element is not present, you cna use queryByTestId()
it('displays the username', () => {
cy.createUser().then(user => {
cy.visit('/')
.getByText(/login/i)
.click()
.getByLabelText(/username/i)
.type(user.username)
.getByLabelText(/password/i)
.type(user.password)
.getByText(/submit/i)
.click()
.assertLoggedInAs(user)
.getByText(/logout/i)
.click()
.queryByTestId('username-display', {timeout: 300})
.should('not.exist')
})
});
Combine custom Cypress commands into a single custom command
Almost every time we need to login, we’ll want to have a newly created user to login as. Let’s go ahead and combine the createNewUser
and login
commands to create a single loginAsNewUser
which we can use in any test that needs an authenticated user.
// support/commands.js Cypress.Commands.add('loginAsNewUser', () => {
cy.createUser().then(user => {
cy.login(user)
});
}); Cypress.Commands.add('login', user => {
cy.request({
url: 'http://localhost:3000/login',
method: 'POST',
body: user,
}).then(({body}) => {
window.localStorage.setItem('token', body.user.token);
return body.user;
})
})
// e2e/calcualtor.js describe('authenticated calculator', () => {
it('displays the username', () => {
cy.loginAsNewUser().then((user) => {
cy.visit('/')
.getByTestId('username-display')
.should('have.text', user.username)
.getByText(/logout/i)
.click()
.queryByTestId('username-display', {timeout: 300})
.should('not.exist')
})
});
})
Install React DevTools with Cypress
Because Cypress runs in a real Chrome browser, we can install extensions, like React DevTools. The tricky bit will be to make our application hook up to the extension properly.
react-dev-tools.js
if (window.Cypress) {
window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = window.parent.__REACT_DEVTOOLS_GLOBAL_HOOK__
}
Import the script before we import the REACT
index.js
import './react-dev-tools' import './global.css'
import React from 'react'
[Cypress] install, configure, and script Cypress for JavaScript web applications -- part3的更多相关文章
- [Cypress] install, configure, and script Cypress for JavaScript web applications -- part1
Despite the fact that Cypress is an application that runs natively on your machine, you can install ...
- [Cypress] install, configure, and script Cypress for JavaScript web applications -- part2
Use Cypress to test user registration Let’s write a test to fill out our registration form. Because ...
- [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 wa ...
- [Cypress] install, configure, and script Cypress for JavaScript web applications -- part5
Use the Most Robust Selector for Cypress Tests Which selectors your choose for your tests matter, a ...
- Cypress系列(3)- Cypress 的初次体验
如果想从头学起Cypress,可以看下面的系列文章哦 https://www.cnblogs.com/poloyy/category/1768839.html 前言 这里的栗子项目时 Cypress ...
- Cypress系列(41)- Cypress 的测试报告
如果想从头学起Cypress,可以看下面的系列文章哦 https://www.cnblogs.com/poloyy/category/1768839.html 注意 51 testting 有一篇文章 ...
- document.write('<script type=\"text/javascript\"><\/script>')
document.write('<script type=\"text/javascript\"><\/script>')
- <script language = "javascript">, <script type = "text/javascript">和<script language = "application/javascript">(转)
application/javascript是服务器端处理js文件的mime类型,text/javascript是浏览器处理js的mime类型,后者兼容性更好(虽然application/ ...
- 2.1 <script>元素【JavaScript高级程序设计第三版】
向 HTML 页面中插入 JavaScript 的主要方法,就是使用<script>元素.这个元素由 Netscape 创造并在 Netscape Navigator 2 中首先实现.后来 ...
随机推荐
- PyCharm(一)——PyCharm设置SSH远程调试
一.环境 系统环境:windows10 64位 软件:PyCharm2017.3 本地Python环境:Python2.7 二.配置 2.1配置远程调试 第一步:运行PyCharm,然后点击设置如下图 ...
- laravel中migrate的使用
migration的使用是大大提高了我们开发的效率,数据库迁移大大的方便了我们.今天我就来给大家分享下migration 首先: laravel提供了我们一些基本的建表的规范: 表名:通常用名词+s的 ...
- 出现Android.os.NetworkOnMainThreadException 错误
两种方法解决: 1.如果用的gradle打包,在build.gradle中修改配置 修改SDKVersion 为低版本(7),不能版本降低过多,否则会出现很多不适配. 2.将网络访问放在一个新的线程中 ...
- GitHub中国区前100名到底是什么样的人?(转载)
本文根据Github公开API,抓取了地址显示China的用户,根据粉丝关注做了一个排名,分析前一百名的用户属性,剖析这些活跃在技术社区的牛人到底是何许人也!后续会根据我的一些经验出品<技术人员 ...
- [SQL server] IF ELSE 和 CASE WHEN 的用法
/*判断一个数如果大于10,按10统计,如果小于0,按0统计*/ --方法a DECLARE @AA INT SET @AA=15 IF @AA>10 SELECT 10 ELSE IF @AA ...
- 紫书第五章训练2 F - Compound Words
F - Compound Words You are to find all the two-word compound words in a dictionary. A two-word compo ...
- 【JavaScript 3—基础知识点】:运算符
导读:其实看到这个运算符的学习,很有一种熟悉感,因为在总体看来,和之前的C++有很多类似的地方,但当时觉得简单,没有总结.所以,这次一定得总结了.其实,知识的罗列,基础的积累,在学习中也很重要. 一. ...
- 【Luogu】P2522Problemb(莫比乌斯反演)
题目链接 同Zip—Queries,但是用到容斥原理 设f(n,m)是(x,y)的对数,其中1<=x<=n,1<=y<=m 则有f(n,m)-f(a-1,n)-f(b-1,m) ...
- spring之注入类型
spring有三种注入类型: set注入: 构造注入: 接口注入: 一.set注入(引用spring官方文档中的例子)(用的最多) 1.首先在代码中我们需要编写成员变量的set方法,如下所示,一般情况 ...
- [HNOI2010]CHORUS 合唱队 (区间DP)
题目描述 对于一个包含 NN 个整数的数列 AA ,我们可以把它的所有元素加入一个双头队列 BB . 首先 A1A1 作为队列的唯一元素,然后依次加入 A2∼ANA2∼AN ,如果 Ai<Ai− ...