Cypress：如何等待然后读取仅在30秒到120秒之间出现的元素的内部文本

Question

我有一个要求，一旦我注册了用户注册，我的ID就会在后端生成，并且网页会在30秒到120秒之间的某个时间之后显示该ID。

所以当我使用时：

cy.get('header > p').invoke('text').then('text' => {
    cy.log("User Id: " + text)
})

注册完成后我可能还没有，所以我需要每10秒钟左右进行一次循环检查，直到将用户ID显示为选择器'header> p'的一部分

尝试了不同的循环逻辑等，包括等待并检查，但是由于请求的异步性质，变量作用域对我不起作用，因此尝试了cy.wrap（'false'）。as（'found'），然后尝试在cy.get（this）中使用.found），但是一旦我需要将其链接到.then。

那么，有没有一种简单的方法可以使用command.js存储全局变量值？我可以在

中更新

while(!variableFound) {
cy.get('header > p').invoke('text').then('text' => {
    cy.log("User Id: " + text)
    if(text.length > 0) {
        variableFound = true
    } else {
        variableFound = false
    }
})
}

最后在论坛上尝试了以下代码，即使User Id在header> p标记中可用，它仍然无法识别该代码。

    let found = false
    let count=0
    while (!found) {

        const nonExistent = Cypress.$('header > p')

        // this is always evaluating to 0 even when p is become available and contains has the text
        cy.log("Length: " + nonExistent.length) 

        if (!nonExistent.length) {                                
            cy.visit("/profile/")                
            found = false
            count=count+1
            cy.wait(5000)
            cy.visit("/dashboard/")

            if(count==18) {
                found = true
                cy.log('Element not found after 18 attempts.Exit from loop!!!')
            }
        } else {
            found = true
            cy.get('header > p').invoke('text').then((useridtext) => {
                cy.log("User Id: " + useridtext)
            })
        }
    }

衷心感谢任何建议。非常感谢。

Answer 1

问题是并非所有命令链都像您期望的那样应用automatic retry mechanism。

所以cy.get('header > p').invoke('text')重试了第一部分（寻找元素），但是一旦元素出现，它就会获取当时的任何文本。

cy.contains()命令最好重试，直到元素和正确的内容都出现为止。

由于最多可能需要120秒，因此您必须延长重试超时时间。

参考cy.contains()，第四个样式.contains(selector, content, options)。

一些想法，

如果您知道将发送什么用户ID

如果总是得到一个已知的用户ID，或者可以存入呼叫并返回值进行测试，请执行此操作。

cy.contains('header > p', 'expectedUserId', { timeout: 120000 })
  .invoke('text')
  .then(text => cy.log("User Id: " + text) )

---

如果您只知道将要发送的用户ID的一般形式，则>]

如果您不知道确切的用户ID，但知道它的格式（例如，总是一个数字），请使用regexp

。

cy.contains('header > p', /\d+/, { timeout: 120000 })
  .invoke('text')
  .then(text => cy.log("User Id: " + text) )
如果您知道该元素将在用户ID到达之前为空，则>]

对非空内容使用regexp。>>

cy.contains('header > p', /.+/, { timeout: 120000 })
  .invoke('text')
  .then(text => cy.log("User Id: " + text) )
 
感谢@RichardMatsen和Arnon Axelrod，以下是对我有用的递归函数。
/* Recursive function */
function getEnvironment() {
    function getEnvironmentInternal(retires) {
        if (retires == 0) {
            throw "text didn't appear after the specified retires";
        }
        return cy.get('header > p').invoke('text').then(text => {
            if(text) {
                 return cy.wrap(text);
            }

            cy.wait(10000);
            cy.reload();
            return getEnvironmentInternal(retires-1);
        });
    }
    return getEnvironmentInternal(12);
 }

/* Usage */
getEnvironment().then(text => {
    cy.log("User Id: " + text);
});

Answer 2

感谢@RichardMatsen和Arnon Axelrod，以下是对我有用的递归函数。

/* Recursive function */
function getEnvironment() {
    function getEnvironmentInternal(retires) {
        if (retires == 0) {
            throw "text didn't appear after the specified retires";
        }
        return cy.get('header > p').invoke('text').then(text => {
            if(text) {
                 return cy.wrap(text);
            }

            cy.wait(10000);
            cy.reload();
            return getEnvironmentInternal(retires-1);
        });
    }
    return getEnvironmentInternal(12);
 }

/* Usage */
getEnvironment().then(text => {
    cy.log("User Id: " + text);
});