From 2f7670fa1eb444439dd0e524be9bb95c72c48302 Mon Sep 17 00:00:00 2001 From: cod23684 Date: Fri, 13 Dec 2024 19:04:15 +0100 Subject: [PATCH] add locators and more tests --- nala/libs/screenshot/utils.js | 12 ---- nala/studio/studio.page.js | 38 ++++++++++++ nala/studio/studio.spec.js | 22 +++++++ nala/studio/studio.test.js | 112 +++++++++++++++++++++++++--------- 4 files changed, 143 insertions(+), 41 deletions(-) delete mode 100644 nala/libs/screenshot/utils.js diff --git a/nala/libs/screenshot/utils.js b/nala/libs/screenshot/utils.js deleted file mode 100644 index 3698de1..0000000 --- a/nala/libs/screenshot/utils.js +++ /dev/null @@ -1,12 +0,0 @@ -// eslint-disable-next-line import/no-extraneous-dependencies, import/no-import-module-exports, import/extensions -const fs = require('fs'); -const path = require('path'); - -const ALLOWED_BASE_DIRECTORY = 'screenshots'; - -function writeResultsToFile(folderPath, testInfo, results) { - const resultFilePath = `${folderPath}/results-${testInfo.workerIndex}.json`; - fs.writeFileSync(validatePath(resultFilePath, { forWriting: true }), JSON.stringify(results, null, 2)); -} - -module.exports = { compareScreenshots, writeResultsToFile, validatePath }; diff --git a/nala/studio/studio.page.js b/nala/studio/studio.page.js index 900db83..d46a538 100644 --- a/nala/studio/studio.page.js +++ b/nala/studio/studio.page.js @@ -7,6 +7,7 @@ export default class StudioPage { this.filter = page.locator('sp-action-button[label="Filter"]'); this.topFolder = page.locator('sp-picker[label="TopFolder"] > button'); this.renderView = page.locator('render-view'); + this.editorPanel = page.locator('editor-panel'); this.suggestedCard = page.locator( 'merch-card[variant="ccd-suggested"]', ); @@ -14,6 +15,43 @@ export default class StudioPage { this.sliceCardWide = page.locator( 'merch-card[variant="ccd-slice"][size="wide"]', ); + this.price = page.locator('span[data-template="price"]'); + this.priceStrikethrough = page.locator( + 'span[data-template="strikethrough"]', + ); + this.cardIcon = page.locator('merch-icon'); + this.cardBadge = page.locator('.ccd-slice-badge'); + // Editor panel fields + this.editorTitle = page.locator('#card-title'); + // suggested cards + this.suggestedCard = page.locator( + 'merch-card[variant="ccd-suggested"]', + ); + this.suggestedCardTitle = this.page.locator('h3[slot="heading-xs"]'); + this.suggestedCardEyebrow = page.locator('h4[slot="detail-s"]'); + this.suggestedCardDescription = page + .locator('div[slot="body-xs"] p') + .first(); + this.suggestedCardLegalLink = page.locator('div[slot="body-xs"] p > a'); + this.suggestedCardPrice = page.locator('p[slot="price"]'); + this.suggestedCardCTA = page.locator('div[slot="cta"] > sp-button'); + this.suggestedCardCTALink = page.locator( + 'div[slot="cta"] a[is="checkout-link"]', + ); + // slice cards + this.sliceCard = page.locator('merch-card[variant="ccd-slice"]'); + this.sliceCardWide = page.locator( + 'merch-card[variant="ccd-slice"][size="wide"]', + ); + this.sliceCardImage = page.locator('div[slot="image"] img'); + this.sliceCardDescription = page + .locator('div[slot="body-s"] p > strong') + .first(); + this.sliceCardLegalLink = page.locator('div[slot="body-s"] p > a'); + this.sliceCardCTA = page.locator('div[slot="footer"] > sp-button'); + this.sliceCardCTALink = page.locator( + 'div[slot="footer"] a[is="checkout-link"]', + ); } async getCard(id, cardType) { diff --git a/nala/studio/studio.spec.js b/nala/studio/studio.spec.js index 2f3fe65..b40e8bf 100644 --- a/nala/studio/studio.spec.js +++ b/nala/studio/studio.spec.js @@ -20,5 +20,27 @@ export default { browserParams: '#query=', tags: '@mas-studio', }, + { + tcid: '1', + name: '@studio-search-field', + path: '/studio.html', + data: { + cardid: '206a8742-0289-4196-92d4-ced99ec4191e', + }, + browserParams: '#path=nala', + tags: '@mas-studio', + }, + { + tcid: '2', + name: '@studio-edit-title', + path: '/studio.html', + data: { + cardid: '206a8742-0289-4196-92d4-ced99ec4191e', + title: 'Automation Test Card', + newTitle: 'Change title', + }, + browserParams: '#query=', + tags: '@mas-studio', + }, ], }; diff --git a/nala/studio/studio.test.js b/nala/studio/studio.test.js index 1ec036b..fad5420 100644 --- a/nala/studio/studio.test.js +++ b/nala/studio/studio.test.js @@ -1,21 +1,29 @@ import { expect, test } from '@playwright/test'; -import studioSpec from './studio.spec.js'; +import StudioSpec from './studio.spec.js'; import StudioPage from './studio.page.js'; import ims from '../libs/imslogin.js'; -import take from '../libs/screenshot/take.js' +const { features } = StudioSpec; const miloLibs = process.env.MILO_LIBS || ''; -const folderPath = 'screenshots/studio'; let studio; -const { features } = studioSpec; -test.beforeEach(async ({ page, browserName }) => { +test.beforeEach(async ({ page, browserName, baseURL }) => { + test.slow(); test.skip( browserName !== 'chromium', 'Not supported to run on multiple browsers.', ); studio = new StudioPage(page); + features[0].url = `${baseURL}/studio.html`; + await page.goto(features[0].url); + await page.waitForURL('**/auth.services.adobe.com/en_US/index.html**/'); + await ims.fillOutSignInForm(features[0], page); + await expect(async () => { + const response = await page.request.get(features[0].url); + expect(response.status()).toBe(200); + }).toPass(); + await page.waitForLoadState('domcontentloaded'); }); test.describe('M@S Studio feature test suite', () => { @@ -24,46 +32,92 @@ test.describe('M@S Studio feature test suite', () => { page, baseURL, }) => { - const name = `${features[0].name}`; + const name = `${features[0].name}`; test.slow(); const { data } = features[0]; const testPage = `${baseURL}${features[0].path}${miloLibs}${features[0].browserParams}${data.cardid}`; console.info('[Test Page]: ', testPage); - await test.step('step-1: Log in to MAS studio', async () => { + await test.step('step-1: Go to MAS Studio test page', async () => { await page.goto(testPage); - page.waitForTimeout(5000); - const result = await take.take( - page, - folderPath, - name, - ); - // writeResultsToFile(folderPath, testInfo, result); - - await page.waitForURL( - '**/auth.services.adobe.com/en_US/index.html**/', - ); - features[0].url = - `${baseURL}/studio.html`; - await ims.fillOutSignInForm(features[0], page); - await expect(async () => { - const response = await page.request.get(features[0].url); - expect(response.status()).toBe(200); - }).toPass(); await page.waitForLoadState('domcontentloaded'); }); - await test.step('step-2: Go to MAS Studio test page', async () => { + await test.step('step-2: Validate search results', async () => { + await expect(await studio.renderView).toBeVisible(); + + const cards = await studio.renderView.locator('merch-card'); + expect(await cards.count()).toBe(1); + }); + }); + + // @studio-search-field - Validate search field in mas studio + test(`${features[1].name},${features[1].tags}`, async ({ + page, + baseURL, + }) => { + const name = `${features[0].name}`; + + test.slow(); + const { data } = features[1]; + const testPage = `${baseURL}${features[1].path}${miloLibs}${features[1].browserParams}`; + console.info('[Test Page]: ', testPage); + + await test.step('step-1: Go to MAS Studio test page', async () => { await page.goto(testPage); await page.waitForLoadState('domcontentloaded'); }); - await test.step('step-3: Validate search results', async () => { + await test.step('step-2: Validate search field rendered', async () => { + await expect(await studio.searchInput).toBeVisible(); + await expect(await studio.searchIcon).toBeVisible(); await expect(await studio.renderView).toBeVisible(); - const cards = await studio.renderView.locator('merch-card'); - expect(await cards.count()).toBe(1); + expect(await cards.count()).toBeGreaterThan(1); + }); + + await test.step('step-3: Validate search feature', async () => { + await studio.searchInput.fill(data.cardid); + await page.keyboard.press('Enter'); + await page.waitForTimeout(2000); + expect(await studio.getCard(data.cardid, 'suggested')).toBeVisible; + const searchResult = await studio.renderView.locator('merch-card'); + expect(await searchResult.count()).toBe(1); + }); + }); + + // @studio-edit-title - Validate edit title feature in mas studio + test(`${features[2].name},${features[2].tags}`, async ({ + page, + baseURL, + }) => { + const name = `${features[2].name}`; + + test.slow(); + const { data } = features[2]; + const testPage = `${baseURL}${features[2].path}${miloLibs}${features[2].browserParams}${data.cardid}`; + console.info('[Test Page]: ', testPage); + + await test.step('step-1: Go to MAS Studio test page', async () => { + await page.goto(testPage); + await page.waitForLoadState('domcontentloaded'); + }); + + await test.step('step-2: Open card editor', async () => { + expect(await studio.getCard(data.cardid, 'suggested')).toBeVisible; + await (await studio.getCard(data.cardid, 'suggested')).dblclick(); + expect(await studio.editorPanel).toBeVisible; + }); + await test.step('step-2: Open card editor', async () => { + expect(await studio.editorPanel.title).toBeVisible; + await expect( + await studio.editorPanel.locator(studio.editorTitle), + ).toHaveAttribute('value', `${data.title}`); + await studio.editorPanel + .locator(studio.editorTitle) + .locator('input') + .fill(data.newTitle); }); }); });