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);
        });
  • 相关阅读:
    linux下 yum 安装mysql和卸载
    Linux下怎么查看当前系统的版本
    linux下安装jdk+tomcat+eclipse+mysql
    JS获取浏览器名和版本信息
    Xshell与securecrt之间不同
    手把手教你使用Git
    leetcode 91 解码方法
    leetcode 88
    leetcode 70 爬楼梯
    leetcode 382 Linked List Random Node 链表随机节点
  • 原文地址:https://www.cnblogs.com/Answer1215/p/9264667.html
Copyright © 2011-2022 走看看