Explore generating tests with Playwright MCP Server and GPT-4.1

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

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

  get nav() {
    return {
      signIn: this.page.getByRole('link', { name: 'Sign in' }),
      newArticle: this.page.getByRole('link', { name: /New Article/ }),
      username: (username: string) => this.page.getByRole('link', { name: username }),
    };
  }

  get loginForm() {
    return {
      email: this.page.getByRole('textbox', { name: 'Email' }),
      password: this.page.getByRole('textbox', { name: 'Password' }),
      submit: this.page.getByRole('button', { name: 'Sign in' }),
    };
  }

  get editorForm() {
    return {
      title: this.page.getByRole('textbox', { name: 'Article Title' }),
      about: this.page.getByRole('textbox', { name: "What's this article about?" }),
      content: this.page.getByRole('textbox', { name: /Write your article/ }),
      publish: this.page.getByRole('button', { name: 'Publish Article' }),
    };
  }

  get article() {
    return {
      title: (title: string) => this.page.getByRole('heading', { name: title }),
      edit: this.page.getByRole('link', { name: /Edit Article/ }).first(),
      delete: this.page.getByRole('button', { name: /Delete Article/ }).first(),
    };
  }

  async login(email: string, password: string, username: string) {
    await this.nav.signIn.click();
    await this.loginForm.email.fill(email);
    await this.loginForm.password.fill(password);
    await this.loginForm.submit.click();
    await expect(this.nav.username(username)).toBeVisible();
  }

  async createArticle(title: string, about: string, content: string) {
    await this.nav.newArticle.click();
    await this.editorForm.title.fill(title);
    await this.editorForm.about.fill(about);
    await this.editorForm.content.fill(content);
    await this.editorForm.publish.click();
    await expect(this.article.title(title)).toBeVisible();
  }

  async editArticle(updatedTitle: string, updatedAbout: string, updatedContent: string) {
    await this.article.edit.click();
    await this.editorForm.title.fill(updatedTitle);
    await this.editorForm.about.fill(updatedAbout);
    await this.editorForm.content.fill(updatedContent);
    await this.editorForm.publish.click();
    await expect(this.article.title(updatedTitle)).toBeVisible();
  }

  async deleteArticle() {
    await this.article.delete.click();
    // After deletion, should be redirected to home/profile, article should not be visible
  }
}