Adding Marketo form tests.

features/milo/marketo.block.spec.js

@@ -0,0 +1,15 @@
+module.exports = {
+  name: 'Marketo Forms block',
+  features: [
+    {
+      name: '@marketo production form',
+      path: '/drafts/nala/blocks/marketo/marketo-mcz-production-2277',
+      tags: '@marketo @marketoProductionForm @milo @smoke @regression',
+    },
+    {
+      name: '@marketo short form',
+      path: '/drafts/nala/blocks/marketo/marketo-mcz-short-form-2259',
+      tags: '@marketo @marketoShortForm @milo @smoke @regression',
+    },
+  ],
+};

selectors/milo/marketo.block.page.js

@@ -0,0 +1,64 @@
+import { expect } from '@playwright/test';
+
+export default class Marketo {
+  constructor(page) {
+    this.page = page;
+    this.marketo = this.page.locator('.marketo');
+    this.salutation = this.marketo.locator('#Salutation');
+    this.firstName = this.marketo.locator('#FirstName');
+    this.lastName = this.marketo.locator('#LastName');
+    this.email = this.marketo.locator('#Email');
+    this.phone = this.marketo.locator('#Phone');
+    this.company = this.marketo.locator('#mktoFormsCompany');
+    this.functionalArea = this.marketo.locator('#mktoFormsFunctionalArea');
+    this.country = this.marketo.locator('#Country');
+    this.state = this.marketo.locator('#State');
+    this.postalCode = this.marketo.locator('#PostalCode');
+    this.jobTitle = this.marketo.locator('#mktoFormsJobTitle');
+    this.primaryProductInterest = this.marketo.locator('#mktoFormsPrimaryProductInterest');
+    this.submitButton = this.marketo.locator('#mktoButton_new');
+  }
+
+  /**
+   * @description Checks that the form fields display.
+   * Checking the fields that all form IDs have.
+   */
+  async checkFieldsDisplays() {
+    await expect(this.country).toBeVisible({ timeout: 10000 });
+    await expect(this.firstName).toBeVisible();
+    await expect(this.lastName).toBeVisible();
+    await expect(this.email).toBeVisible();
+    await expect(this.company).toBeVisible();
+    await expect(this.submitButton).toBeVisible();
+  }
+
+  /**
+   * @description Form ID: MCZ Short Form (2259)
+   */
+  async submitShortForm() {
+    await this.country.selectOption('United States');
+    await this.firstName.fill('TestFirstName');
+    await this.lastName.fill('TestLastName');
+    await this.email.fill('[email protected]');
+    await this.company.fill('Adobe');
+    await this.submitButton.click();
+  }
+
+  /**
+   * @description Form ID: MCZ Production (2277)
+   */
+  async submitProductionForm() {
+    await this.functionalArea.selectOption('Other');
+    await this.country.selectOption('United States');
+    await this.jobTitle.selectOption('Other');
+    await this.primaryProductInterest.selectOption('Digital marketing');
+    await this.state.selectOption('California');
+    await this.firstName.fill('TestFirstName');
+    await this.lastName.fill('TestLastName');
+    await this.email.fill('[email protected]');
+    await this.phone.fill('415-111-2222');
+    await this.company.fill('Adobe');
+    await this.postalCode.fill('94111');
+    await this.submitButton.click();
+  }
+}

tests/milo/marketo.block.test.js

@@ -0,0 +1,57 @@
+import { expect, test } from '@playwright/test';
+import { features } from '../../features/milo/marketo.block.spec.js';
+import MarketoBlock from '../../selectors/milo/marketo.block.page.js';
+
+let marketoBlock;
+
+test.describe('Marketo block test suite', () => {
+  test.beforeEach(async ({ page }) => {
+    marketoBlock = new MarketoBlock(page);
+  });
+
+  test(`${features[0].name},${features[0].tags}`, async ({ page, baseURL }) => {
+    const testPage = `${baseURL}${features[0].path}`;
+    console.info(`[Test Page]: ${testPage}`);
+
+    await test.step('step-1: Go to Marketo Block test page', async () => {
+      await page.goto(testPage);
+      await page.waitForLoadState('domcontentloaded');
+      await expect(page).toHaveURL(testPage);
+    });
+
+    await test.step('step-2: Check the form fields display', async () => {
+      await marketoBlock.checkFieldsDisplays();
+    });
+
+    await test.step('step-3: Fill in and submit the Marketo production form', async () => {
+      await marketoBlock.submitProductionForm();
+    });
+
+    await test.step('step-4: Verify the form submission redirect', async () => {
+      await expect(page).not.toHaveURL(testPage, { timeout: 15000 });
+    });
+  });
+
+  test(`${features[1].name},${features[1].tags}`, async ({ page, baseURL }) => {
+    const testPage = `${baseURL}${features[1].path}`;
+    console.info(`[Test Page]: ${testPage}`);
+
+    await test.step('step-1: Go to Marketo Block test page', async () => {
+      await page.goto(testPage);
+      await page.waitForLoadState('domcontentloaded');
+      await expect(page).toHaveURL(testPage);
+    });
+
+    await test.step('step-2: Check the form fields display', async () => {
+      await marketoBlock.checkFieldsDisplays();
+    });
+
+    await test.step('step-3: Fill in and submit Marketo short form', async () => {
+      await marketoBlock.submitShortForm();
+    });
+
+    await test.step('step-4: Verify the form submission redirect', async () => {
+      await expect(page).not.toHaveURL(testPage, { timeout: 15000 });
+    });
+  });
+});