Rayrun
← Back to Discord Forum

Creating and using Playwright functions

Hey guys, if you could help me. So i started automation testing with Cypress, and now i want to continue with Playwright. I am working in Typescript. In Cypress I was using commands, which we can use multiple times. I manage to create something simular in Playwright with functions, and didn't have to use POM.

I want to know is that way is correct? Or should i change my code to use POM?

This thread is trying to answer question "Should I continue using functions in Playwright or switch to using the Page Object Model (POM)?"

3 replies

I went through the same migration process @Sale . My project is up to about 37k LOC now, and while we don't have any 'formal' POMs, we do group our functions by pages/components. I would encourage looking into the 'screenplay' pattern if you are interested in test framework architecture that scales well. https://serenity-js.org/handbook/design/screenplay-pattern/

I am in a somewhat similar situation- although in my case I am building a suite from scratch. My thought is if I can get by with functions to avoid code duplication that’s good enough - I may use POM later as the size of test suite crowds

deadbeef01

Design pattern is up to your choice. If you use POM. You can use page fixtures which will reduce page initialisation in tests.

Answer

Functions vs Page Object Model in Playwright

Both functions and the Page Object Model (POM) in Playwright offer unique advantages.

Functions in Playwright

Functions like page.waitForFunction() let you evaluate a function in the context of a page. This is handy when you need to wait for certain conditions on the page to be met before proceeding.

await page.waitForFunction('document.querySelector("body").innerText.includes("Hello World")');

Page Object Model

If your test suite is large or complex, using individual functions can become cumbersome. That's where POM comes in. POM allows you to encapsulate common operations on specific pages of your application into reusable objects.

class HomePage {
  async navigate() {
    await page.goto('https://ray.run');
  }
  // other methods for interacting with the home page
}

Each part of your web application can be represented by separate POMs. This simplifies authoring and makes maintenance easier by centralizing element selectors in one place.

Conclusion

Whether you should continue using functions or switch to using the Page Object Model depends largely on the complexity of your test suite and personal preference. If you find yourself repeating similar sequences of operations across different tests or struggling with maintaining consistency across tests due to scattered selectors, it might be beneficial for you to switch over to using POMs.

Related Discord Threads

TwitterGitHubLinkedIn
AboutQuestionsDiscord ForumBrowser ExtensionTagsQA Jobs

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.