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);
        });
  • 相关阅读:
    C++中的static关键字的总结
    2017上海C++面试
    Vim 跳到上次光标位置
    Windows XP Professional产品序列号
    Centos7 安装sz,rz命令
    Xshell里连接VirtualBox里的Centos7
    什么是位、字节、字、KB、MB
    Centos7 tmux1.6 安装
    Centos7 在 Xshell里 vim的配置
    对JDBC的轻量级封装,Hibernate框架
  • 原文地址:https://www.cnblogs.com/Answer1215/p/9264667.html
Copyright © 2011-2022 走看看