Sponsored Link
Looking for a unified way to  viewmonitor, and  debug Playwright Test Automation runs?
Try the Playwright Dashboard by today. Use the coupon code PWSOL10 for a 12 month 10% discount.

How do you create a dynamic goto function in Playwright?

If you've ever needed create a goto method that is dynamic in that it can take parameters and use them in the URL you want to visit, this solution should be helpful. I don't have a demo site to write live code against for this example, so we're just going to be working with sudo code.

For this example assume you have a url that allows you to both register by visiting the page direct /auth/register or also allows a URL parameters for /auth/register?invitation=xxxxxx to be passed into the url that allows you to land on an pre-filled page to register.

In the below example when we goto(inviteId) we dynamically build the url with the passed in invitation Id.

// /tests/auth/register.spec.ts

import { RegisterPage } from "@pages";
import { getInvitationId } from "@datafactory";
import { test } from "@playwright/test";

test.describe("Register Specs", () => {
  let inviteId;

  test.beforeEach(async () => {
    inviteId = await getInvitationId();
  test("Register with existing Invite Id", async ({ page }) => {
    const registerPage = new RegisterPage(page);
    await registerPage.goto(inviteId);

    // Add additional assertions
// /lib/pages/registerPage.ts
export class RegisterPage {

  async goto(inviteId?) {
    let url = "/auth/register";
    if (inviteId) url += "?invitation=" + inviteId;
    await this.page.goto(url);

  constructor(private readonly page: Page) {}

Thanks for reading! If you found this helpful, reach out and let me know on LinkedIn or consider buying me a cup of coffee. If you want more content delivered to you in your inbox subscribe below, and be sure to leave a ❤️ to show some love.