test: added tests for contact us page-GRS task

package.json

@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "main": "index.js",
   "scripts": {
-    "test:headed": "npx playwright test --headed",
+    "test:headed": "npx playwright test --headed --project=Chromium",
     "test:headless": "npx playwright test"
   },
   "keywords": [],

pages/contactUsPage.ts

@@ -0,0 +1,38 @@
+import { Page,BrowserContext, Locator, FrameLocator, } from "@playwright/test";
+
+export class ContactUsPage {
+    readonly page:Page
+    readonly context: BrowserContext;
+
+    readonly firstNameInput: Locator
+    readonly lastNameInput: Locator
+    readonly emailInput: Locator
+    readonly commentSection: Locator
+    readonly submitBtn: Locator
+    readonly nameErrorMessage: Locator
+    readonly emailErrorMessage: Locator
+    readonly commentErrorMessage: Locator
+    readonly widgetElement: Locator
+    readonly youTubeElement: Locator
+    readonly iframe: FrameLocator;
+
+
+    constructor(page:Page, context: BrowserContext) {
+        this.page = page
+        this.context = context
+
+        this.iframe = page.frameLocator('iframe[src="https://forms.zohopublic.com/giantrocketship/form/ContactUs/formperma/2GK_UjFMD9mHGNOwqNGNR4-lMvKrCQeBVRGu4FTSuY4?zf_rszfm=1&gclid=undefined"]');
+
+        this.firstNameInput = this.iframe.locator('input[elname="First"]');
+        this.lastNameInput = this.iframe.locator('input[elname="Last"]');
+        this.emailInput = this.iframe.locator('input[name="Email"]');
+        this.commentSection = this.iframe.locator('textarea[id="MultiLine-arialabel"]');
+        this.submitBtn = this.iframe.locator('button[elname="submit"]')
+        this.nameErrorMessage = this.iframe.locator('#error-Name')
+        this.emailErrorMessage = this.iframe.locator('#error-Email')
+        this.commentErrorMessage = this.iframe.locator('#error-MultiLine')
+        this.widgetElement = this.page.locator('div[data-widget_type="text-editor.default"] p')
+        this.youTubeElement = this.page.locator('div[data-settings*="youtube_url"]')
+    }
+
+}

pages/homePage.ts

@@ -5,16 +5,28 @@ export class HomePage {
     readonly context: BrowserContext;
 
     readonly getStartedBtn: Locator
+    readonly GRSLogo: Locator
+    readonly navbar: { [key: string]: Locator };
 
     constructor(page:Page, context: BrowserContext) {
         this.page = page
         this.context = context
 
         this.getStartedBtn = page.getByRole('link', {name: 'Get started'})
+        this.GRSLogo = page.locator('a[href="https://giantrocketship.com"]')
+        this.navbar = {
+            Home: this.page.getByRole('link', { name: 'Home', exact: true }),
+            Pricing: this.page.getByRole('link', { name: 'Pricing', exact: true }),
+            Resources: this.page.getByRole('link', { name: 'Resources', exact: true }),
+            Contact: this.page.locator('a[aria-haspopup="true"]:has-text("Contact")'),
+            ScheduleDemo: this.page.getByRole('link', { name: 'Schedule Demo', exact: true }),
+            ContactUs: this.page.getByRole('link', {name: 'Contact Us', exact: true})
+        };
     }
 
 
     async goToHomePage(): Promise<void> {
         await this.page.goto('/')
     }
+
 }

playwright.config.ts

@@ -38,9 +38,9 @@ export default defineConfig({
       name: 'chromium',
       use: { 
         browserName: 'chromium',
-        baseURL: 'https://playwright.dev',
+        baseURL: 'https://giantrocketship.com',
         headless: true,
-        viewport: { width: 1920, height: 1080 },
+        viewport: { width: 2560, height: 1440 },
         ignoreHTTPSErrors: true,
         acceptDownloads: true,
         screenshot: 'only-on-failure',
@@ -56,7 +56,7 @@ export default defineConfig({
       name: 'firefox',
       use: { 
         browserName: 'firefox',
-        baseURL: 'https://playwright.dev',
+        baseURL: 'https://giantrocketship.com',
         headless: true,
         viewport: { width: 1920, height: 1080 },
         ignoreHTTPSErrors: true,
@@ -70,7 +70,7 @@ export default defineConfig({
       name: 'webkit',
       use: { 
         browserName: 'webkit',
-        baseURL: 'https://playwright.dev',
+        baseURL: 'https://giantrocketship.com',
         headless: true,
         viewport: { width: 1920, height: 1080 },
         ignoreHTTPSErrors: true,
@@ -85,7 +85,7 @@ export default defineConfig({
       use: {
         browserName: 'chromium', 
         channel: 'msedge', 
-        baseURL: 'https://playwright.dev',
+        baseURL: 'https://giantrocketship.com',
         headless: true,
         viewport: { width: 1920, height: 1080 },
         ignoreHTTPSErrors: true,

support/BaseTest.ts

@@ -1,14 +1,19 @@
 import { test as baseTest } from '@playwright/test';
 import { HomePage } from '../pages/homePage'; 
 import { CommonActions } from './commonActions'; 
+import { ContactUsPage } from '../pages/contactUsPage';
 
 const test = baseTest.extend<{
     homePage: HomePage;
     webActions: CommonActions;
+    contactUsPage: ContactUsPage
 }>({
     homePage: async ({ page,context }, use) => {
         await use(new HomePage(page, context));
     },
+    contactUsPage: async ({ page,context }, use) => {
+        await use(new ContactUsPage(page, context));
+    },
     webActions: async ({ page }, use) => {
         await use(new CommonActions(page));
     },

support/commonActions.ts

@@ -1,4 +1,4 @@
-import { Page, Locator } from '@playwright/test';
+import { Page, Locator, expect } from '@playwright/test';
 
 export class CommonActions {
     private page: Page;
@@ -7,18 +7,20 @@ export class CommonActions {
         this.page = page;
     }
 
-    async clickButton(locator: Locator) {
-        await locator.scrollIntoViewIfNeeded();
-        await locator.click();
+    async clickButton(locator: Locator, index: number = 0): Promise<void> {
+        const element = locator.nth(index);
+        await element.scrollIntoViewIfNeeded();
+        await element.click();
     }
+
+    async inputText(element: Locator, text: string): Promise<void> {
+        await element.fill(text);
+    }    
 
-    async inputText(selector: string, text: string) {
-        await this.page.locator(selector).fill(text);
-    }
-
-    async isVisible(selector: string): Promise<boolean> {
-        return await this.page.locator(selector).isVisible();
-    }
+    async isVisible(element: Locator): Promise<boolean> {
+        await expect(element).toBeVisible();
+        return await element.isVisible();
+    }    
 
     async getText(selector: string): Promise<string> {
         return await this.page.locator(selector).innerText();
@@ -27,4 +29,39 @@ export class CommonActions {
     async waitForElement(selector: string, timeout: number = 5000) {
         await this.page.locator(selector).waitFor({ timeout });
     }
+
+    async hoverOverElement(element: Locator): Promise<void> {
+        await element.hover();
+    }
+
+    async isTextVisible(locator: Locator, expectedText: string, index: number = 0, timeout: number = 5000): Promise<void> {
+        const element = locator.nth(index);
+        await element.waitFor({ state: 'visible', timeout });
+        const actualText = await element.innerText();
+        expect(actualText.trim()).toBe(expectedText.trim());
+    }
+
+    /**
+     * Validates the current URL.
+     * @param expectedUrl The expected URL or a part of the URL.
+     * @param matchType The type of match: 'exact' or 'contains'
+     */
+
+    async validateUrl(expectedUrl: string, matchType: 'exact' | 'contains' ) {
+        const currentUrl = this.page.url();
+
+        switch (matchType) {
+            case 'exact':
+                expect(currentUrl).toBe(expectedUrl);
+                break;
+
+            case 'contains':
+                expect(currentUrl).toContain(expectedUrl);
+                break;
+
+            default:
+                throw new Error(`Invalid match type: ${matchType}`);
+        }
+    }
+
 }

support/utils/randomUtils.ts

@@ -0,0 +1,8 @@
+export function generateRandomString(length: number): string {
+    const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+    let result = '';
+    for (let i = 0; i < length; i++) {
+        result += characters.charAt(Math.floor(Math.random() * characters.length));
+    }
+    return result;
+}