javascript - 访问新网址 Cypress

我是 Cypress 的新手。我的应用程序作为“路由系统”手动更改 window.location.hash 。
在某些时候，我单击了一个更改哈希的按钮，因此应该在测试期间更改页面。我可以看到在执行过程中出现一个“新网址”条目，但是如何让柏树访问该网址？



简而言之，问题是: 你可以看到我输入密码，然后 {enter} 。运行测试我可以看到地址栏中的散列更改，但页面不会根据散列更改而更改。

这是测试代码

context("Workflow", () => {

    it("login", () => {

        cy.visit("http://localhost:3000/src/#login")
        cy.get("#username").type("demo").should("have.value", "demouser")
        cy.get("#password").type("demo{enter}").should("have.value", "demo") // this should redirect to "/#home"
        //cy.wait(10000)
        cy.get(".subtitle").should("have.value", "Welcome") //this line fails as ".subtitle" is an element of "/#home"
    })
})

编辑: 经过无数次失败的尝试，我想出了一个部分有效、笨拙且笨拙的解决方案。我认为我不需要使用 reload() 来解决这个问题(必须有更好的解决方案..)，但要使其工作，我必须等待所有远程请求完成(否则 reload() 会取消它们)。我说部分工作是因为如果我先尝试访问 #login ，然后按照 #home 中的重定向，然后将页面更改为 #browser ，您可以从代码中的注释中看到，最后一个不起作用(我可以看到哈希值发生变化#browser ，但页面仍然是 #home )。

import 'cypress-wait-until';

let i = 0;

context("Workflow", () => {
    it("login", () => {
        cy.server( {
            onRequest: () => {
                i++;
            },
            onResponse: () => {
                i--;
            }
        });

        cy.visit("http://localhost:3000/src/#login")
        cy.get("#username").type("demouser").should("have.value", "demouser")
        cy.get("#password").type("demouser").should("have.value", "demouser")
        cy.get("form#formLogin").submit()

        cy.waitUntil(() => i > 0)
        cy.waitUntil(() => i === 0)
        cy.reload(); // it correctly change the hash AND the page to #home!

        cy.url().should("include", "#home")
        cy.get(".version").contains( "v2.0.0-beta") // it works!!

        cy.get("a[data-id=browser]").click({force: true}) // it correctly changes the hash to #browser
        cy.waitUntil(() => i > 0)
        cy.waitUntil(() => i === 0)
        cy.reload();

        // the hash in the address bar is #browser, but the web page is #home
    })
})

最佳答案

Cypress 有一个名为 url:changed 的事件。请参阅有关 事件的文档 here

使用这个，这样的事情可能会起作用:

context("Workflow", () => {
    it("login", () => {

        cy.on('url:changed', url => {
            cy.location('hash').then(hash => {
                if (!url.endsWith(hash)) {
                    cy.visit(url);
                }
            });
        });

        cy.visit("http://localhost:3000/src/#login")
        cy.get("#username").type("demo").should("have.value", "demouser")
        cy.get("#password").type("demo{enter}").should("have.value", "demo") // this should redirect to "/#home"
        cy.get(".subtitle").should("have.value", "Welcome") //this line fails as ".subtitle" is an element of "/#home"

    })
})

编辑:仅出于故障排除目的并专注于您的问题，您可以在没有 cy.location() 的情况下尝试这样的操作:

context("Workflow", () => {
    it("login", () => {

        cy.on('url:changed', url => {
            cy.visit(url);
        });

        cy.visit("http://localhost:3000/src/#login")
        cy.get("#username").type("demo").should("have.value", "demouser")
        cy.get("#password").type("demo{enter}").should("have.value", "demo") // this should redirect to "/#home"
        cy.get(".subtitle").should("have.value", "Welcome") //this line fails as ".subtitle" is an element of "/#home"

    })
})

编辑:你试过 cy.reload()

context("Workflow", () => {

    it("login", () => {

        cy.visit("http://localhost:3000/src/#login")
        cy.get("#username").type("demo").should("have.value", "demouser")
        cy.get("#password").type("demo{enter}").should("have.value", "demo") // this should redirect to "/#home"
        cy.reload();
        cy.get(".subtitle").should("have.value", "Welcome");
    })
})

关于javascript - 访问新网址 Cypress，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/61531828/