Navigation to "../login" is interrupted by another navigation
Hi all,
Just getting started with Playwright and am running into the error mentioned in the title.
I suspect that this is happening because in our beforeEach section for we login to the application for every test. So there are a lot of calls going to /login.
Important to note that when I run the tests with --ui and then individually re-run the tests that failed with this error then they are fine, which reinforces my thought that there is a race condition being introduced in the beforeEach section
Is this an anti-pattern - or is there something else going on here that I don't fully understand yet? I don't really see much information about this out in the wild...
This thread is trying to answer question "Why is navigation to '/login' being interrupted by another navigation in Playwright, and how can this issue be resolved?"
sure!
This is the before section
test.beforeEach(async ({ page }) => {
const loginPage = new LoginPage(page);
await page.goto(environment.url);
const user = environment.users[0];
await loginPage.login(user, environment);
await page.waitForSelector('my-app');
await expect(page, 'Successful login').toHaveTitle(/Application/);
});and the Login page looks as follows
export class LoginPage extends AbstractSection {
protected readonly page: Page;
constructor(page: Page) {
this.page = page;
}
public async login(user: User, environment: Environment) {
await this.page.goto(environment.loginUrl);
if (this.isProd(environment)) {
await this.loginProd(user);
} else {
await this.loginLocal(user);
}
}
private isProd(environment: Environment) {
return environment.name !== 'LOCAL';
}
private async loginProd(user: User) {
await this.fillField('#username', user.name);
await this.clickElement('#submitInputImmNameId');
await this.fillField('#inputPassName', user.pwd);
await this.clickElement('#submitInputAutId');
}
private async loginLocal(user: User) {
await this.fillField('#username', user.name);
await this.fillField('#password', user.pwd);
await this.clickElement('#submitInputImmNameId');
}
private async fillField(selector: string, value: string) {
const userNameInput: ElementHandle = await this.page.waitForSelector(selector);
await userNameInput.focus();
await userNameInput.fill(value);
}
private async clickElement(selector: string) {
const nextButton: ElementHandle = await this.page.waitForSelector(selector);
await nextButton.click();
}
}
Rayrun is a community for QA engineers. I am constantly looking for new ways to add value to people learning Playwright and other browser automation frameworks. If you have feedback, email luc@ray.run.