Cypress 获取属性值并将其分配给函数中的变量答案

【问题标题】：Cypress get attribute value and assign it to variable in functionCypress 获取属性值并将其分配给函数中的变量
【发布时间】：2022-01-19 15:35:08
【问题描述】：

我正在尝试获取属性值并从函数中返回它。这是可以在正常测试类中使用的代码（进入集成文件夹）。

describe('Example shows how to get attribute value.', () => {
    // 'it' is used to create test case. You can add a name of the test case. You can have multiple test cases in one JS class.
    it('Get attribute value.', () => {
        // Cypress is not able to work with new tabs. It is not possible to switch between tabs. Cypress can manipulate the DOM tree, so we can change the element attributes and open the hyperlink in the same browser tab.
        // 'visit()' method is used for navigating to URL address.
        cy.visit('https://demoqa.com/links')
        cy.xpath('//*[@id="simpleLink"]').then(function (element) {
            // 'prop()' method is used to get the attribute value.
            const url = element.prop('href')
            cy.visit(url)
        })
        // Assert URL.
        cy.url().should('include', 'demoqa.com').should('eq', 'https://demoqa.com/');
    })

如果我以这种方式使用代码 - 一切都会按预期工作。

但如果我想重用代码并创建这样的函数：

// Give a value of the variable to use it for next function.
functionName = 'addAttribute';
// Declare a Cypress child custom command.
Cypress.Commands.add(functionName, { prevSubject: 'element' }, (subject: any, attributeName: string, attributeValue: string) => {
    // Create a try-catch statement. If the function fails - we will recieve the error message.
    try {
        // Create the function steps after this comment.
        cy
            .wrap(subject)
            .invoke('attr', attributeName, attributeValue)
            .should('have.attr', attributeName, attributeValue)
    } catch (error) {
        // Create the error log and show it to the UI. Show the function name, the class where the function is located and catched error.
        let errorMessage = `----------ERROR! It seems that we have an error. Please review the "${functionName}" function from "${__filename.split(__dirname + "/").pop()}" . The error is: ${error}`;
        cy.log(errorMessage);
        console.log(errorMessage);
    }
})

结果是“对象”，我不知道如何处理它。以下是其余代码：

describe("'getAttribute' custom child command example.", () => {
    it("example shows how to use 'getAttribute' custom child command.", () => {
        cy.visit('https://demoqa.com/buttons');
        let attributeValue = cy.element('xpath','(//*[contains(text(),"Click Me")])[3]').getAttribute('class');
        cy.log(`The attribute values is: ${attributeValue}`)
    });
});

【问题讨论】：

标签： cypress getattribute add-custom-command

【解决方案1】：

您必须执行以下操作才能获得返回值：

let attributeValue = '';
cy.element('xpath', '(//*[contains(text(),"Click Me")])[3]')
    .getAttribute('class')
    .then((attr) => {
        attributeValue = attr;
    });
cy.log('The attribute values is:' + attributeValue)

【讨论】：

当我尝试在 Cypress 中运行代码时，我得到了奇怪的行为 - 浏览器无法被操纵...gifyu.com/image/SSH0u
attributeValue 在调用cy.log 时将始终为空，因为then 回调将在稍后（异步）执行

【解决方案2】：

我试过了，但我得到了一个错误。这是我的代码：

// Give a value of the variable to use it for next function.
functionName = 'getAttribute';
// Declare a Cypress child custom command.
Cypress.Commands.add(functionName, { prevSubject: 'element' }, (subject: any, attributeName: string) => {
    // Create a try-catch statement. If the function fails - we will recieve the error message.
    try {
        // Create the function steps after this comment.
        let attributeValue = '';
        cy
            .wrap(subject)
            .getAttribute(attributeName)
            .then((attr) => {
                attributeValue = attr;
            });
        return attributeValue;
    } catch (error) {
        // Create the error log and show it to the UI. Show the function name, the class where the function is located and catched error.
        let errorMessage = `----------ERROR! It seems that we have an error. Please review the "${functionName}" function from "${__filename.split(__dirname + "/").pop()}" . The error is: ${error}`;
        cy.log(errorMessage);
        console.log(errorMessage);
    }
})

当我调用该方法时，我收到此错误：

【讨论】：