angular - 为什么预定义变量在 Cypress 中的行为不符合预期？

Question

在预定义元素变量并随后在 Cypress 10 w/Cucumber 中使用它们时，我得到了奇怪的结果。考虑这个登录测试:

Given("I'm logged in as Default user", () => {        

    cy.visit('/');

    let usernameField = cy.get('#myUsernameInputField');
    let passwordField = cy.get('#myPasswordInputField');
    let signInButton = cy.get('#mySignInButton');
  
    usernameField.clear();

    usernameField.type('<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="82effbd7f1e7f0ece3efe7c2e5efe3ebeeace1edef" rel="noreferrer noopener nofollow">[email protected]</a>');
   
    passwordField.type('myPassword');
  
    signInButton.click();

});

这会导致用户名和密码都被输入到passwordField中，并且signInButton永远不会被单击。只有当我按时间顺序重新排列变量时，此测试才会按预期运行:

Given("I'm logged in as Default user", () => {

    cy.visit('/');

    let usernameField = cy.get('#myUsernameInputField');
    usernameField.clear();
    usernameField.type('<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="83eefad6f0e6f1ede2eee6c3e4eee2eaefade0ecee" rel="noreferrer noopener nofollow">[email protected]</a>');

    let password = cy.get('#myPasswordInputField');
    password.type('myPassword');
  
    let signInButton = cy.get('#mySignInButton');
    signInButton.click();

});

我计划最终将这些变量移至页面对象文件中。但在测试中，当我预先定义它们并稍后尝试使用它们时，它们的行为并不符合预期。这是为什么？

Answer 1

基本上，您不应该在纯 JavaScript 变量中保存对查询结果的引用。

原因是，Cypress 运行在队列系统上，队列在任何时候都只有一个“主题”。

您应该将队列视为与测试执行异步运行的单独线程或执行进程，因此线程中的变量可能与队列主题不同步。

---

执行此操作的传统方法是立即使用查询结果，例如

cy.get('#myUsernameInputField').type('<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3855416d4b5d4a5659555d785f55595154165b5755" rel="noreferrer noopener nofollow">[email protected]</a>');

然后继续下一个查询(密码)。

如果由于某种原因您确实需要查询结果的引用，Cypress 有一个alias 机制来处理它

cy.get('#myUsernameInputField').as('username)

...
// later in the test

cy.get('@username').type('<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8ae7f3dff9eff8e4ebe7efcaede7ebe3e6a4e9e5e7" rel="noreferrer noopener nofollow">[email protected]</a>');