zoukankan      html  css  js  c++  java
  • [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 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'
  • 相关阅读:
    atitit.session的原理以及设计 java php实现的异同
    atitit.破解 拦截 绕过 网站 手机 短信 验证码 之自动获取手机短信方式 attilax 总结
    java softReference 详解
    android开发:TextView中android:autoLink属性的作用
    抽象类和接口的简单差别
    android一个简单的线程实例
    Java 批注
    最简单的菜单操作
    AsyncTask的参数介绍
    (转)android中ListView在划屏到底部的时候动态添加ListView的Item实现
  • 原文地址:https://www.cnblogs.com/Answer1215/p/10079585.html
Copyright © 2011-2022 走看看