diff --git a/features/milo/marketo.block.spec.js b/features/milo/marketo.block.spec.js new file mode 100644 index 00000000..bfcf9bff --- /dev/null +++ b/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', + }, + ], +}; diff --git a/selectors/milo/marketo.block.page.js b/selectors/milo/marketo.block.page.js new file mode 100644 index 00000000..ae14e1b4 --- /dev/null +++ b/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('test@adobe.com'); + 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('test@adobe.com'); + await this.phone.fill('415-111-2222'); + await this.company.fill('Adobe'); + await this.postalCode.fill('94111'); + await this.submitButton.click(); + } +} diff --git a/tests/milo/marketo.block.test.js b/tests/milo/marketo.block.test.js new file mode 100644 index 00000000..300d0c17 --- /dev/null +++ b/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 }); + }); + }); +});