Посетите новый URL Cypress

Question

Я новичок в Cypress. Мое приложение как «система маршрутизации» вручную меняет window.location.hash. В какой-то момент я нажимаю на кнопку, которая меняет га sh и, следовательно, должна изменить страницу во время теста. Я могу видеть запись "новый URL", появляющуюся во время выполнения, но как я могу сделать посещение кипариса с этим URL?

В нескольких слова, в чем проблема: вы видите, я набираю пароль, а затем {enter}. При выполнении теста я вижу изменение ha sh в адресной строке, но страница не изменяется в соответствии с изменением ha sh.

Это код тестирования

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, последняя не работает ( Я вижу, что ha sh меняется на #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

Cypress имеет событие под названием url:changed. См. Do c on События здесь

Используя это, что-то вроде этого может работать:

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

Есть несколько способов сделать это. Один из базовых c подходов выглядит следующим образом:

  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 к своим элементам с уникальным идентификатором. Чтобы посетить новый URL, вы можете использовать cy.visit(loc.pathname)