DEV Community

Cover image for Explore generating tests with Playwright MCP Server and xAI-Grok-3
idavidov13
idavidov13

Posted on • Edited on

Explore generating tests with Playwright MCP Server and xAI-Grok-3

#playwright #mcp #qa #ai

Introduction

As we setup the stage in Part 4 we are ready to continue exploration. Next is xAI-Grok-3.

Prerequisites

  1. xAI-Grok-3 is selected as a model
  2. The following prompt is run: 
Create a test case utilizing provided constants for navigating to the web app, login, create/edit/delete an article. Try to verify the result after every major step. Use provided instructions
Enter fullscreen mode Exit fullscreen mode

Generated POM (Page Object Model) 

class ConduitApp {
  constructor(private page: Page) {}

  async navigateToHome() {
    await this.page.goto(url);
    await expect(this.page.getByRole('heading', { name: 'conduit' })).toBeVisible();
  }

  async login() {
    await this.page.getByRole('link', { name: 'Sign in' }).click();
    await this.page.getByPlaceholder('Email').fill(email);
    await this.page.getByPlaceholder('Password').fill(password);
    await this.page.getByRole('button', { name: 'Sign in' }).click();
  }

  async createArticle() {
    await this.page.getByRole('link', { name: 'New Article' }).click();
    await this.page.getByPlaceholder('Article Title').fill(articleTitle);
    await this.page.getByPlaceholder('What\'s this article about?').fill(articleAbout);
    await this.page.getByPlaceholder('Write your article (in markdown)').fill(articleContent);
    await this.page.getByRole('button', { name: 'Publish Article' }).click();
    await expect(this.page.getByRole('heading', { name: articleTitle })).toBeVisible();
  }

  async editArticle() {
    await this.page.getByRole('link', { name: 'Edit Article' }).first().click();
    await this.page.getByPlaceholder('Article Title').fill(updatedArticleTitle);
    await this.page.getByPlaceholder('What\'s this article about?').fill(updatedArticleAbout);
    await this.page.getByPlaceholder('Write your article (in markdown)').fill(updatedArticleContent);
    await this.page.getByRole('button', { name: 'Publish Article' }).click();
    await expect(this.page.getByRole('heading', { name: updatedArticleTitle })).toBeVisible();
  }

  async deleteArticle() {
    await this.page.getByRole('button', { name: 'Delete Article' }).first().click();
    await expect(this.page.getByText(updatedArticleTitle)).toBeVisible();
  }
}
Enter fullscreen mode Exit fullscreen mode

NOTE The provided example was generated from the first time. Updates which were needed to be made were to remove incorrect assertion (await expect(this.page.getByRole('link', { name: 'Your Feed' })).toBeVisible();), to add .first() for the delete button and edit button, and updete assertion after delete article button click (await expect(this.page.getByText(updatedArticleTitle)).toBeVisible();).

Pros of the selected pattern

  1. Encapsulation: Only exposes actions, not locators, enforcing the Page Object pattern strictly.
  2. API Clarity: Test code reads like user actions (pageObject.fillUsername('foo')).
  3. Maintainability: Easy to update selectors in one place, and logic can be added to methods.

Cons of the selected pattern

  1. Reduced Flexibility: Cannot easily make custom assertions or interact with elements outside provided methods.
  2. Verbosity: May require many methods for complex pages, leading to bloated classes.

What's next?

Stay tuned for next article in which we will explore generated test from DeepSeek R1, since the implementation do not uses POM.
Please, do not hesitate to start conversation regarding the test or it's result.

🙏🏻 Thank you for reading! Building robust, scalable automation frameworks is a journey best taken together. If you found this article helpful, consider joining a growing community of QA professionals 🚀 who are passionate about mastering modern testing.

Join the community and get the latest articles and tips by signing up for the newsletter.

Top comments (0)