What is the difference between using functions and the Page Object Model in Playwright?


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.


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.


Thank you!
Was this helpful?
Still have questions?

If you still have questions, please ask a question and I will try to answer it.

Related Discord Threads

Related Questions

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.