访问新网址赛普拉斯

Question

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

简而言之，问题是什么：你可以看到我输入了密码，然后{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"
    })
})

编辑：经过大量失败的尝试，我想出了一个部分有效、笨重且hacky的解决方案。我认为我不需要使用它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
    })
})

Answer 1

赛普拉斯有一个名为 的活动url:changed。请参阅此处有关事件 的文档

使用这个，类似这样的事情可能会起作用：

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");
    })
})

Answer 2

感谢您尝试解决所有问题，但它们都是一些棘手的解决方法，例如“在window.location.hash更改时触发相关侦听器”这样简单的事情。

问题的根源是Cypress 中的一个错误。上的错误window.location.hash存在于 中4.5.0，但已在4.5.0和之间的某个位置得到解决4.12.1。

4.12.1问题就解决了。