zoukankan      html  css  js  c++  java
  • [Cypress] 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.getand 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.

        it('should Delete an item', function () {
            cy.server();
            cy.route({
                method: 'DELETE',
                url: '/api/todos/*',
                response: {}
            }).as('delete');
    
            cy.seedAndVisit();
    
            cy.get('.todo-list li')
                .first()
                .find('.destroy')
                .invoke('show') // Make the hidden button appear
                .click();
    
            cy.wait('@delete');
    
            cy.get('.todo-list li')
                .should('have.length', 3);
        });

    The code above, we have use 'cy.get('.todo-list li')' in two places.

    We can use alias for DOM element as well to reduce duplication:

        it('Using alias for the DOM element', function () {
            cy.server();
            cy.route({
                method: 'DELETE',
                url: '/api/todos/*',
                response: {}
            }).as('delete');
    
            cy.seedAndVisit();
    
            cy.get('.todo-list li')
                .as('list'); // alias the DOM element
    
            cy.get('@list')
                .first()
                .find('.destroy')
                .invoke('show')
                .click();
    
            cy.wait('@delete');
    
            cy.get('@list')
                .should('have.length', 3);
        });
  • 相关阅读:
    图片延迟加载方法
    mongodb常用命令
    未知尺寸元素水平垂直居中:
    nodejs学习之加密
    nodejs学习之events的使用
    nodejs学习之events
    学习Nodejs之mysql
    PHP之几道面试题
    Jquery学习插件之手风琴
    我的第一篇博客
  • 原文地址:https://www.cnblogs.com/Answer1215/p/9264667.html
Copyright © 2011-2022 走看看