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 logincommands 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的更多相关文章

  1. [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 ...

  2. [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 ...

  3. [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 ...

  4. [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 ...

  5. Cypress系列(3)- Cypress 的初次体验

    如果想从头学起Cypress,可以看下面的系列文章哦 https://www.cnblogs.com/poloyy/category/1768839.html 前言 这里的栗子项目时 Cypress ...

  6. Cypress系列(41)- Cypress 的测试报告

    如果想从头学起Cypress,可以看下面的系列文章哦 https://www.cnblogs.com/poloyy/category/1768839.html 注意 51 testting 有一篇文章 ...

  7. document.write('<script type=\"text/javascript\"><\/script>')

    document.write('<script type=\"text/javascript\"><\/script>')

  8. <script language = "javascript">, <script type = "text/javascript">和<script language = "application/javascript">(转)

          application/javascript是服务器端处理js文件的mime类型,text/javascript是浏览器处理js的mime类型,后者兼容性更好(虽然application/ ...

  9. 2.1 <script>元素【JavaScript高级程序设计第三版】

    向 HTML 页面中插入 JavaScript 的主要方法,就是使用<script>元素.这个元素由 Netscape 创造并在 Netscape Navigator 2 中首先实现.后来 ...

随机推荐

  1. PyCharm(一)——PyCharm设置SSH远程调试

    一.环境 系统环境:windows10 64位 软件:PyCharm2017.3 本地Python环境:Python2.7 二.配置 2.1配置远程调试 第一步:运行PyCharm,然后点击设置如下图 ...

  2. laravel中migrate的使用

    migration的使用是大大提高了我们开发的效率,数据库迁移大大的方便了我们.今天我就来给大家分享下migration 首先: laravel提供了我们一些基本的建表的规范: 表名:通常用名词+s的 ...

  3. 出现Android.os.NetworkOnMainThreadException 错误

    两种方法解决: 1.如果用的gradle打包,在build.gradle中修改配置 修改SDKVersion 为低版本(7),不能版本降低过多,否则会出现很多不适配. 2.将网络访问放在一个新的线程中 ...

  4. GitHub中国区前100名到底是什么样的人?(转载)

    本文根据Github公开API,抓取了地址显示China的用户,根据粉丝关注做了一个排名,分析前一百名的用户属性,剖析这些活跃在技术社区的牛人到底是何许人也!后续会根据我的一些经验出品<技术人员 ...

  5. [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 ...

  6. 紫书第五章训练2 F - Compound Words

    F - Compound Words You are to find all the two-word compound words in a dictionary. A two-word compo ...

  7. 【JavaScript 3—基础知识点】:运算符

    导读:其实看到这个运算符的学习,很有一种熟悉感,因为在总体看来,和之前的C++有很多类似的地方,但当时觉得简单,没有总结.所以,这次一定得总结了.其实,知识的罗列,基础的积累,在学习中也很重要. 一. ...

  8. 【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) ...

  9. spring之注入类型

    spring有三种注入类型: set注入: 构造注入: 接口注入: 一.set注入(引用spring官方文档中的例子)(用的最多) 1.首先在代码中我们需要编写成员变量的set方法,如下所示,一般情况 ...

  10. [HNOI2010]CHORUS 合唱队 (区间DP)

    题目描述 对于一个包含 NN 个整数的数列 AA ,我们可以把它的所有元素加入一个双头队列 BB . 首先 A1A1 作为队列的唯一元素,然后依次加入 A2∼ANA2∼AN ,如果 Ai<Ai− ...