solution pom

pages/blog.page.ts

@@ -0,0 +1,17 @@
+import { Locator, Page } from '@playwright/test';
+
+class BlogPage {
+  private page: Page;
+  recentPostsList: Locator;
+
+  constructor(page: Page) {
+    this.page = page;
+    this.recentPostsList =  page.locator('#recent-posts-3 ul li');
+  }
+
+  async navigate() {
+    await this.page.goto('https://practice.automationbro.com/blog');
+  }
+}
+
+export default BlogPage;

pages/contact.page.ts

@@ -0,0 +1,35 @@
+import { Locator, Page } from '@playwright/test';
+
+class ContactPage {
+  private page: Page;
+  nameInput: Locator;
+  emailInput: Locator;
+  phoneInput: Locator;
+  messageTextArea: Locator;
+  submitBtn: Locator;
+  successTxt: Locator;
+
+  constructor(page: Page) {
+    this.page = page;
+    this.nameInput = page.locator('.contact-name input')
+    this.emailInput = page.locator('.contact-email input')
+    this.phoneInput = page.locator('.contact-phone input')
+    this.messageTextArea = page.locator('.contact-message textarea')
+    this.submitBtn = page.locator('button[type=submit]')
+    this.successTxt = page.locator('div[role="alert"]')
+  }
+
+  async navigate() {
+    await this.page.goto('https://practice.automationbro.com/contact');
+  }
+
+  async submitForm(name: string, email: string, phone: string, message: string) {
+    await this.nameInput.fill(name)
+    await this.emailInput.fill(email)
+    await this.phoneInput.fill(phone)
+    await this.messageTextArea.fill(message)
+    await this.submitBtn.click()
+  }
+}
+
+export default ContactPage;

tests/blog.spec.ts

@@ -1,20 +1,21 @@
 import { test, expect } from '@playwright/test';
+import BlogPage from '../pages/blog.page';
 
 test.describe('Blog', () => {
+  let blogPage: BlogPage;
+
   test('Verify Recent Posts count and verify the length of each list item', async ({ page }) => {
-    // open blog page
-    await page.goto('https://practice.automationbro.com/blog')
+    blogPage = new BlogPage(page);
 
-    // get the recent post list elements
-    const recentPostsList = page.locator('#recent-posts-3 ul li')
+    // open blog page
+    await blogPage.navigate();
 
     // loop through the list and assert the char length > 10
-    for (const el of await recentPostsList.elementHandles()) {
-      expect(((await el.textContent()).trim()).length).toBeGreaterThan(10)
+    for (const el of await blogPage.recentPostsList.elementHandles()) {
+      expect(((await el.textContent())!.trim()).length).toBeGreaterThan(10)
     }
 
     // assert the total length = 5
-    expect(await recentPostsList.count()).toEqual(5)
+    expect(await blogPage.recentPostsList.count()).toEqual(5)
   })
-
 })

tests/contact.spec.ts

@@ -1,27 +1,19 @@
 import { test, expect } from '@playwright/test';
+import ContactPage from '../pages/contact.page';
 
 test.describe('Contact', () => {
-  test('Fill contact form and verify success message', async ({ page }) => {
-    // open contact page
-    await page.goto('https://practice.automationbro.com/contact')
-
-    //  fill out the input fields
-    await page.locator('.contact-name input').fill('Test Name')
-    await page.locator('.contact-email input').fill('[email protected]')
-    await page.locator('.contact-phone input').fill('134567864')
-    await page.locator('.contact-message textarea').fill('This is a test message')
+  let contactPage: ContactPage;
 
-    // add a soft assertion
-    await expect.soft(page.locator('.contact-message textarea')).toHaveText("Fail test message")
+  test('Fill contact form and verify success message', async ({ page }) => {
+    contactPage = new ContactPage(page);
 
-    // click submit
-    await page.locator('button[type=submit]').click()
+    // open contact page
+    await contactPage.navigate()
 
-    expect(test.info().errors.length).toBeLessThan(1)
+    //  fill out the input fields and submit
+    await contactPage.submitForm('test name', '[email protected]', '123789123', 'Hello! this is taking advantage of POM');
 
     // verify success message
-    const successAlert = page.locator('div[role="alert"]')
-    await expect(successAlert).toHaveText('for contacting us! We will be in touch with you shortly')
+    await expect(contactPage.successTxt).toHaveText('Thanks for contacting us! We will be in touch with you shortly')
   })
-
 })