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);
        });
  • 相关阅读:
    学习计划 23月
    bash学习笔记
    bash 中 while读取文件并通过 ssh执行命令出现的问题及解决方法
    bash 学习笔记2
    fedora 启动 openssh
    lesson5 键盘的应用
    第十三章 int指令
    第十五章 外中断
    第十二章 内中断
    第十四章 端口
  • 原文地址:https://www.cnblogs.com/Answer1215/p/9264667.html
Copyright © 2011-2022 走看看