Question

我是赛普拉斯的新手。我的应用程序作为“路由系统”手动更改了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()来解决这个问题（必须有更好的解决方案。），但是要使其正常工作，我必须等待所有远程请求都完成（否则{{1 }}取消它们）。我说的是部分有效，因为您可以从代码中的注释中看到，如果我先尝试访问reload()，然后按照#login的重定向进行操作，然后将页面更改为#home，最后一个不起作用（我可以看到哈希更改为#browser，但是页面仍然是#browser）。

#home

Answer 1

赛普拉斯有一个名为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" }) })的事件。请参阅事件 here

上的文档

使用此功能，类似这样的可以起作用：

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" }) })的情况下尝试这样做：

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

编辑：您是否尝试过cy.reload()

from turtle import Screen, Turtle

def restart(x, y):
    global running
    running = False

def move():
    if running:
        turtle.forward(0.1)
        screen.ontimer(move)
    else:
        screen.bye()

turtle = Turtle()

screen = Screen()
screen.onscreenclick(restart)

running = True

move()

screen.mainloop()

print("game ended")

Answer 2

有一些方法可以做到这一点。一种基本方法是这样的：

  cy.visit(`your_login_page`)
  cy.get('[data-testid="input-username"]').type(`demo`, { force: true })
  cy.get('[data-testid="input-password"]')
    .type(`demo`, {
      force: true,
    })
    .wait(1000)
    .then(() => {
      cy.location().should((loc) => {
        expect(loc.pathname).to.eq(your_new_url)
      })
    })

您应将data-testid或findByTestId添加到具有唯一ID的元素中。要访问新网址，您可以使用cy.visit(loc.pathname)

Answer 3

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

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

在 4.12.1 中问题解决了。

访问新的网址赛普拉斯

3 个答案: