add locators and more tests

nala/studio/studio.page.js

@@ -7,13 +7,51 @@ 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"]',
         );
         this.sliceCard = page.locator('merch-card[variant="ccd-slice"]');
         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) {

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',
+        },
     ],
 };

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);
         });
     });
 });