Helpx_Milo Components Script Fixes

configs/helpx.config.js

@@ -1,13 +1,12 @@
 // @ts-check
 const { devices } = require('@playwright/test');
-
 const envs = require('../envs/envs.js');
 
 /**
  * @see https://playwright.dev/docs/test-configuration
  * @type {import('@playwright/test').PlaywrightTestConfig}
  */
-const config = {
+const helpxconfig = {
   testDir: '../tests/helpx',
   outputDir: '../test-results',
   /* Maximum time one test can run for. */
@@ -35,11 +34,11 @@ const config = {
   workers: process.env.CI ? 2 : undefined,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
   reporter: process.env.CI
-    ? [['github'], ['list'], ['../utils/reporters/base-reporter.js']]
+    ? [['github'], ['list']]
     : [
         ['html', { outputFolder: 'test-html-results' }],
         ['list'],
-        ['./utils/reporters/base-reporter.js'],
+
       ],
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
@@ -59,6 +58,10 @@ const config = {
       name: 'helpx-live-chrome',
       use: {
         ...devices['Desktop Chrome'],
+        channel: 'chrome',
+        launchOptions: {
+          args: ['--disable-web-security', '--disable-gpu'],
+        },
       },
     },
 
@@ -77,4 +80,4 @@ const config = {
     },
   ],
 };
-export default config;
+export default helpxconfig;

selectors/helpx/beforeafter.page.js

@@ -1,15 +1,10 @@
-import { expect } from '@playwright/test';
-import { WebUtil } from '../../libs/webutil.js';
-
 export default class BeforeAfter {
   constructor(page) {
     this.page = page;
 
     // BeforeAfter Selectors:
-    this.beforeAftr = page.locator('.beforeafter');
-    this.beforeafterVertical = page.locator(selectors['@beforeafter-vertical']);
-    this.beforeafterVerticalmoved = page.locator(
-      selectors['@beforeafter-vertical-moved']
-    );
+    this.beforeAftr = page.locator("(//div[@class='before-after-slider vertical'])[1]");
+    this.beforeafterVertical = page.locator(['@beforeafter-vertical']);
+    this.beforeafterVerticalmoved = page.locator(['@beforeafter-vertical-moved']);
   }
 }

selectors/helpx/codeBlock.page.js

@@ -1,12 +1,9 @@
-import { expect } from '@playwright/test';
-import { WebUtil } from '../../libs/webutil.js';
-
 export default class CodeBlock {
   constructor(page) {
     this.page = page;
 
     // CodeBlock Selectors:
-    this.codeA3 = page.locator('div.language-as3');
+    this.codeA3 = page.locator("//div[@class='code language-as3']");
     this.codeFusion = page.locator('div.language-coldfusion');
     this.codeC = page.locator('div.language-c');
     this.codeCss = page.locator('div.language-css');
@@ -17,6 +14,7 @@ export default class CodeBlock {
     this.codeSql = page.locator('div.language-sql');
     this.codeXml = page.locator('div.language-xml');
     this.codeMxml = page.locator('div.language-mxml');
+    //language Selectors
     this.codeA3Num = page.locator('.language-as3.line-numbers');
     this.codeFusionNum = page.locator('.language-coldfusion.line-numbers');
     this.codeCNum = page.locator('.language-c.line-numbers');
@@ -28,6 +26,7 @@ export default class CodeBlock {
     this.codeSqlNum = page.locator('.language-sql.line-numbers');
     this.codeXmlNum = page.locator('.language-xml.line-numbers');
     this.codeMxmlNum = page.locator('.language-mxml.line-numbers');
+    //Hidden Value Selectors
     this.codeHideDsktop = page.locator('.hidden-desktop');
     this.codeHideTablet = page.locator('.hidden-tablet');
     this.codeHideMobile = page.locator('.hidden-mobile');

selectors/helpx/draft.page.js

@@ -1,6 +1,3 @@
-import { expect } from '@playwright/test';
-import { WebUtil } from '../../libs/webutil.js';
-
 export default class Draft {
   constructor(page) {
     this.page = page;

selectors/helpx/procedure.page.js

@@ -1,14 +1,11 @@
-import { expect } from '@playwright/test';
-import { WebUtil } from '../../libs/webutil.js';
-
 export default class Procedure {
   constructor(page) {
     this.page = page;
 
     // Procedure Selectors:
     this.procedure = page.locator('.procedure');
-    this.procedureStep = page.locator('li[class=step]');
-    this.procedureImage = page.locator('hli[class=step] img');
+    this.procedureStep = page.locator("//li[contains(@class,'step')]");
+    this.procedureImage = page.locator("//li[@class='step']//descendant::picture/img");
     this.procedureTxtBold = page.locator('li[class=step] strong');
   }
 }

tests/helpx/beforeafter.test.js

@@ -1,8 +1,11 @@
 import { expect, test } from '@playwright/test';
-import { features } from '../../features/helpx/procedure.spec.js';
-import { BeforeAfter } from '../../selectors/helpx/procedure.page.js';
+import { features } from '../../features/helpx/beforeAfter.spec.js';
+import BeforeAfter from '../../selectors/helpx/beforeafter.page.js';
+import config from '../../configs/helpx.config.js';
 
 let beforeAftr;
+let page;
+let BeforeAfterTag = features[0].path;
 
 test.beforeAll(async ({ browser }) => {
   if (process.env.HLX_TKN !== undefined && process.env.HLX_TKN !== '') {
@@ -19,28 +22,26 @@ test.beforeAll(async ({ browser }) => {
   const context = await browser.newContext();
   // Set the authorization token in the header
   await context.setExtraHTTPHeaders({ authorization: `token ${authToken}` });
-  const page = await context.newPage();
+  page = await context.newPage();
   beforeAftr = new BeforeAfter(page);
-  await page.goto(`${baseURL}${features[0].path}`);
+  await page.goto(`${config.use?.baseURL}${BeforeAfterTag}`);
   await page.waitForLoadState('networkidle');
 });
 
-test.describe('BeforeAfter sanity test suite', () => {
+test.describe('BeforeAfter Sanity test suite', () => {
+
   // Procedure Sanity Checks:
-  test(`${features[0].name}, ${features[0].tags}`, async ({
-    page,
-    baseURL,
-  }) => {
-    console.info(`[Test Page]: ${baseURL}${features[0].path}`);
-    await test.step('Navigate to BeforeAfter page', async () => {
-      await expect(page).toHaveURL(`${baseURL}${features[0].path}`);
+  test(`Verify before After Page validation`, async ({ baseURL }) => {
+    console.log(`[Test Page]: ${baseURL}${BeforeAfterTag}`);
+    //I verify url of the page
+    await test.step('Navigate to beforeAfter page', async () => {
+      await expect(page).toHaveURL(`${baseURL}${BeforeAfterTag}.html`);
     });
 
-    // Check beforeAfter
-    await expect(beforeAftr.beforeafterVertical).toBeVisible();
 
-    // Check beforeAfter after vertical movement
-    beforeafterVertical.scrollTop -= 40;
-    await expect(beforeAftr.beforeafterVerticalmoved).toBeVisible();
+    await test.step('Check Before After page content', async () => {
+      // Check Before After Page component is visible
+      await expect(beforeAftr.beforeAftr).toBeVisible();
+    });
   });
 });

tests/helpx/codeBlock.test.js

@@ -1,8 +1,14 @@
 import { expect, test } from '@playwright/test';
 import { features } from '../../features/helpx/codeBlock.spec.js';
-import { CodeBlock } from '../../selectors/helpx/codeBlock.page.js';
+import CodeBlock from '../../selectors/helpx/codeBlock.page.js';
+import config from '../../configs/helpx.config.js';
+import { WebUtil } from '../../libs/webutil.js';
+
 
 let codeBlk;
+let page;
+let codeblocktag = features[0].path;
+
 
 test.beforeAll(async ({ browser }) => {
   if (process.env.HLX_TKN !== undefined && process.env.HLX_TKN !== '') {
@@ -19,38 +25,48 @@ test.beforeAll(async ({ browser }) => {
   const context = await browser.newContext();
   // Set the authorization token in the header
   await context.setExtraHTTPHeaders({ authorization: `token ${authToken}` });
-  const page = await context.newPage();
+  page = await context.newPage();
   codeBlk = new CodeBlock(page);
-  await page.goto(`${baseURL}${features[0].path}`);
+
+
+  await page.goto(`${config.use?.baseURL}${codeblocktag}`);
   await page.waitForLoadState('networkidle');
 });
 
 test.describe('CodeBlock sanity test suite', () => {
   // CodeBlock Sanity Checks:
-  test(`${features[0].name}, ${features[0].tags}`, async ({
-    page,
-    baseURL,
-  }) => {
-    console.info(`[Test Page]: ${baseURL}${features[0].path}`);
+  test(`verify Code Block Page Elements`, async ({baseURL}) => {
+    console.info(`[Test Page]: ${baseURL}${codeblocktag}`);
     await test.step('Navigate to CodeBlock page', async () => {
-      await expect(page).toHaveURL(`${baseURL}${features[0].path}`);
+      await expect(page).toHaveURL(`${baseURL}${codeblocktag}.html`);
     });
 
     // Check for different codeBlock formats present
-    await expect(codeBlk.codeBlockA3).toBeVisible();
+    await expect(codeBlk.codeA3).toBeVisible();
     await expect(codeBlk.codeFusion).toBeVisible();
     await expect(codeBlk.codeC).toBeVisible();
     await expect(codeBlk.codeCss).toBeVisible();
     await expect(codeBlk.codeJava).toBeVisible();
-    await expect(codeBlk.codeJS).toBeVisible();
-    await expect(codeBlk.codePhp).toBeVisible();
+    await expect(codeBlk.codeJS).toHaveCount(4);
+    await expect(codeBlk.codePhp).toHaveCount(5);
     await expect(codeBlk.codePlain).toBeVisible();
-    await expect(codeBlk.codeSql).toBeVisible();
-    await expect(codeBlk.codeXml).toBeVisible();
+    await expect(codeBlk.codeSql).toHaveCount(3);
+    await expect(codeBlk.codeXml).toHaveCount(2);
     await expect(codeBlk.codeMxml).toBeVisible();
 
-    // Check different InLineNumber codeBlock formats present
-    await expect(codeBlk.codeBlockA3Num).toBeVisible();
+    //verify Code block css Properties
+    expect(await WebUtil.verifyCSS(await codeBlk.codeHideDsktop.first(), codeBlk.cssProperties['codeHideDsktop'])).toBeTruthy();
+    expect(await WebUtil.verifyCSS(await codeBlk.codeHideTablet.first(), codeBlk.cssProperties['codeHideTablet'])).toBeTruthy();
+    expect(await WebUtil.verifyCSS(await codeBlk.codeHideMobile.first(), codeBlk.cssProperties['codeHideMobile'])).toBeTruthy();
+
+    //Verify code Block Attribute Properties
+    expect(await WebUtil.verifyAttributes(await codeBlk.codeHideDsktop.first(), codeBlk.attProperties['codeHideDsktop'])).toBeTruthy();
+    expect(await WebUtil.verifyAttributes(await codeBlk.codeHideTablet.first(), codeBlk.attProperties['codeHideTablet'])).toBeTruthy();
+    expect(await WebUtil.verifyAttributes(await codeBlk.codeHideMobile.first(), codeBlk.attProperties['codeHideMobile'])).toBeTruthy();
+
+
+    //Check different InLineNumber codeBlock formats present
+    await expect(codeBlk.codeA3Num).toBeVisible();
     await expect(codeBlk.codeFusionNum).toBeVisible();
     await expect(codeBlk.codeCNum).toBeVisible();
     await expect(codeBlk.codeCssNum).toBeVisible();
@@ -61,43 +77,5 @@ test.describe('CodeBlock sanity test suite', () => {
     await expect(codeBlk.codeSqlNum).toBeVisible();
     await expect(codeBlk.codeXmlNum).toBeVisible();
     await expect(codeBlk.codeMxmlNum).toBeVisible();
-
-    expect(
-      await WebUtil.verifyCSS(
-        await this.codeHideDsktop,
-        this.cssProperties['codeHideDsktop']
-      )
-    ).toBeTruthy();
-    expect(
-      await WebUtil.verifyCSS(
-        await this.codeHideTablet,
-        this.cssProperties['codeHideTablet']
-      )
-    ).toBeTruthy();
-    expect(
-      await WebUtil.verifyCSS(
-        await this.codeHideMobile,
-        this.cssProperties['codeHideMobile']
-      )
-    ).toBeTruthy();
-
-    expect(
-      await WebUtil.verifyAttributes(
-        await this.codeHideDsktop,
-        this.attProperties['codeHideDsktop']
-      )
-    ).toBeTruthy();
-    expect(
-      await WebUtil.verifyAttributes(
-        await this.codeHideTablet,
-        this.attProperties['codeHideTablet']
-      )
-    ).toBeTruthy();
-    expect(
-      await WebUtil.verifyAttributes(
-        await this.codeHideMobile,
-        this.attProperties['codeHideMobile']
-      )
-    ).toBeTruthy();
   });
 });