ARTICLE AD BOX
As I mentioned in my previous answer, if you're testing (as opposed to scraping), using user-visible text or roles is strongly preferred to classes, as Playwright best practices aptly explains.
As is, it's extremely difficult to tell what all these classes mean. I'd use test.step and organize this blob of code, since there are a ton of different actions, and debugging failures is not easy as-is. Sure, this is extra code, but it's more important to be clear than succinct in cases like this.
Beyond that, I would use waitForURL to ensure each navigation click actually goes to the page it's supposed to and completes before moving on to the next action.
Here's how I'd approach this as an initial rewrite:
import {test} from "@playwright/test"; // ^24.20.0 test.beforeEach(async ({page}) => { const username = "uat1@uat1"; const password = "1234"; await page.goto("https://uat-portal.goleo.app/Default", { waitUntil: "commit", }); await page.getByRole("textbox", {name: "Username"}).fill(username); await page.locator('[type="password"]').type(password, {delay: 50}); await page.locator("#DrpLocation").waitFor(); await page.locator('[type="password"]').fill(password); await page.keyboard.press("Enter"); await page.locator("#updatepanel1").click(); }); test("top-level navigation", async ({page}) => { await test.step("Dashboard", async () => { await page.getByText("Dashboard", {exact: true}).click(); await page.waitForURL("**/Dashboard"); }); await test.step("Insight", async () => { await page.getByText("Insight", {exact: true}).click(); await page.waitForURL("**/Insight"); }); await test.step("Client Queue", async () => { await page.getByText("Client Queue", {exact: true}).click(); await page.waitForURL("**/QueueBuilder"); }); await test.step("Visit", async () => { await page.getByText("Visit", {exact: true}).click(); await page.waitForURL("**/VisitForm"); }); await test.step("Appointments", async () => { await page.getByText("Appointments", {exact: true}).click(); await page.waitForURL("**/Appointment"); }); await test.step("Customers", async () => { await page.getByText("Customers", {exact: true}).click(); await page.waitForURL("**/CustomersForms"); }); await test.step("Customer Report", async () => { await page.getByText("Customer Report", {exact: true}).click(); await page.waitForURL("**/CustomerReport?*"); }); await test.step("Gift Cards", async () => { await page.getByText("Gift Cards", {exact: true}).click(); await page.waitForURL("**/GCForms"); }); await test.step("Reports", async () => { await page.getByText("Reports", {exact: true}).click(); await page.waitForURL("**/Reports"); }); await test.step("Marketing", async () => { await page.getByText("Marketing", {exact: true}).click(); await page.waitForURL("**/MarketingPage"); }); await test.step("Expense", async () => { await page.getByText("Expense", {exact: true}).click(); await page.waitForURL("**/Expense"); }); await test.step("Your Settings", async () => { await page.getByText("Your Settings", {exact: true}).click(); await page.waitForURL("**/EmployeeSetting"); }); await test.step("Business - Form Builder", async () => { await page.getByText("Business", {exact: true}).click(); await page.getByText("Form Builder", {exact: true}).click(); await page.waitForURL("**/FormBuilderList"); }); await test.step("Business - Employees", async () => { await page.getByText("Business", {exact: true}).click(); await page.getByText("Employees", {exact: true}).click(); await page.waitForURL("**/EmployeeForm"); }); await test.step("Business - Attendance", async () => { await page.getByText("Business", {exact: true}).click(); await page.getByText("Attendance", {exact: true}).click(); await page.waitForURL("**/EmpClockInOutForm"); }); await test.step("Business - Products/Services", async () => { await page.getByText("Business", {exact: true}).click(); await page.getByText("Products/Services", {exact: true}).click(); await page.waitForURL("**/ServiceForms"); }); await test.step("Business - Service Workflow", async () => { await page.getByText("Business", {exact: true}).click(); await page.getByText("Service Workflow", {exact: true}).click(); await page.waitForURL("**/ServiceWorkflow"); }); await test.step("Business - Calendar Resources", async () => { await page.getByText("Business", {exact: true}).click(); await page.getByText("Calendar Resources", {exact: true}).click(); await page.waitForURL("**/ResourceForm"); }); await test.step("Business - Settings", async () => { await page.getByText("Business", {exact: true}).click(); await page.getByText("Settings", {exact: true}).click(); await page.waitForURL("**/SettingForms"); }); await test.step("Business - Subscription", async () => { await page.getByText("Business", {exact: true}).click(); await page.getByText("Subscription", {exact: true}).click(); await page.waitForURL("**/SubscriptionOrg"); }); });Sample run:
% npx playwright test nav.test.js Running 1 test using 1 worker ✓ 1 …8:7 › login flow and navigation › top-level navigation (18.1s)Further improvement is certainly possible, like adding a POM to abstract away the locators.
