diff --git a/.github/workflows/helpx.daily.yml b/.github/workflows/helpx.daily.yml
new file mode 100644
index 00000000..5fe70061
--- /dev/null
+++ b/.github/workflows/helpx.daily.yml
@@ -0,0 +1,46 @@
+name: Helpx Nala Daily Run
+
+on:
+  schedule:
+    - cron: "30 15 * * *"
+  workflow_dispatch:
+
+jobs:
+  platform_matrix:
+    strategy:
+      fail-fast: false
+      matrix:
+        os: [ubuntu-latest, windows-latest, macos-latest]
+    name: Running tests
+    runs-on: ${{ matrix.os }}
+    env:
+      WORKFLOW_NAME: 'Helpx Nala Daily Run'
+      DAILY_RUN: 'true'
+
+    steps:
+      - name: Check out repository
+        uses: actions/checkout@v3
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: lts/*
+        
+      - name: Run Nala ${{ matrix.os }}
+        run: bash dailyrun.sh helpx
+        env:
+          IMS_EMAIL: ${{ secrets.IMS_EMAIL }}
+          IMS_PASS: ${{ secrets.IMS_PASS }}
+          HLX_TKN: ${{ secrets.HLX_TKN }}
+          SLACK_WH: ${{ secrets.SLACK_WH }}
+      
+      - name: Display workflow name
+        run: echo "The workflow name is $WORKFLOW_NAME"
+        
+      - name: Persist JSON Artifact
+        uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: nala-results
+          path: nala-results.json
+          retention-days: 30
diff --git a/.github/workflows/manual.yml b/.github/workflows/manual.yml
index 98b3e29c..6238f969 100644
--- a/.github/workflows/manual.yml
+++ b/.github/workflows/manual.yml
@@ -20,8 +20,7 @@ jobs:
     steps:
       - name: Check out repository
         uses: actions/checkout@v3
-      - name: Set permissions
-        run: chmod +x ./path/to/run.sh
+
       - name: Run Nala ${{ inputs.platform }}
         uses: ./
         env:
diff --git a/.github/workflows/milolib.yml b/.github/workflows/milolib.yml
new file mode 100644
index 00000000..8e8d0392
--- /dev/null
+++ b/.github/workflows/milolib.yml
@@ -0,0 +1,54 @@
+name: Run Nala on Milo Libs Manually
+
+on:
+  workflow_dispatch:
+    inputs:
+      branch:
+        description: 'Provide the branch url'
+        required: false
+        type: string
+      milolibs:
+        description: 'Provide MiloLibs param'
+        required: false
+        type: string
+      tags:
+        description: 'Test scenario tags, if empty all tests will run. i.e., @marquee'
+        required: false
+        type: string
+      platform:
+        description: 'Platform to run tests on; select one, options: [ubuntu-latest, windows-latest, macos-latest]'
+        required: true
+        type: string
+
+jobs:
+  action:
+    name: Running tests
+    runs-on: ${{ inputs.platform }}
+    env:
+      WORKFLOW_NAME: 'Milo Libs Run'
+      MILO_LIBS_RUN: 'true'
+
+    steps:
+      - name: Check out repository
+        uses: actions/checkout@v3
+
+      - name: Set environment variables
+        run: |
+          echo "PR_BRANCH_MILOLIBS_LIVE_URL=${{ github.event.inputs.branch }}" >> $GITHUB_ENV
+          echo "MILO_LIBS=${{ github.event.inputs.milolibs }}" >> $GITHUB_ENV
+
+      - name: Run Nala ${{ inputs.platform }}
+        uses: ./
+        env:
+          labels: ${{ inputs.tags }}
+          IMS_EMAIL: ${{ secrets.IMS_EMAIL }}
+          IMS_PASS: ${{ secrets.IMS_PASS }}
+          HLX_TKN: ${{ secrets.HLX_TKN }}
+          SLACK_WH: ${{ secrets.SLACK_WH }}          
+      - name: Persist JSON Artifact
+        uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: nala-results
+          path: nala-results.json
+          retention-days: 30
diff --git a/configs/helpx.config.js b/configs/helpx.config.js
index abc49c66..5aabb260 100644
--- a/configs/helpx.config.js
+++ b/configs/helpx.config.js
@@ -1,6 +1,5 @@
 // @ts-check
 const { devices } = require('@playwright/test');
-
 const envs = require('../envs/envs.js');
 
 /**
@@ -39,7 +38,7 @@ const config = {
     : [
         ['html', { outputFolder: 'test-html-results' }],
         ['list'],
-        ['./utils/reporters/base-reporter.js'],
+        ['../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'],
+        },
       },
     },
 
diff --git a/features/helpx/draft.spec.js b/features/helpx/draft.spec.js
index f49a8d04..0b38e773 100644
--- a/features/helpx/draft.spec.js
+++ b/features/helpx/draft.spec.js
@@ -4,8 +4,26 @@ module.exports = {
     {
       tcid: '0',
       name: '@draft',
-      path: '/automation/blocks/Drafts/draft-test',
+      path: '/automation/blocks/Draft/draft-test.html',
       tags: '@draft @regression @helpx',
     },
+    {
+      tcid: '1',
+      name: '@draftforBeforeAfter',
+      path: '/automation/blocks/Draft/draft-before-after.html',
+      tags: '@draft @regression @helpx',
+    },
+    {
+      tcid: '2',
+      name: '@draftforCodeBlock',
+      path: '/automation/blocks/Draft/draft-code-block.html',
+      tags: '@draft @regression @helpx',
+    },
+    {
+      tcid: '3',
+      name: '@draftforGeneric',
+      path: '/automation/blocks/Draft/draft-generic.html',
+      tags: '@draft @regression @helpx',
+    }
   ],
 };
diff --git a/features/helpx/procedure.spec.js b/features/helpx/procedure.spec.js
index f1346432..a75df1f4 100644
--- a/features/helpx/procedure.spec.js
+++ b/features/helpx/procedure.spec.js
@@ -7,6 +7,78 @@ module.exports = {
         path: '/automation/blocks/procedure',
         tags: '@procedure @regression @helpx',
       },
+      {
+        tcid: '1',
+        name: '@procedureComponentTitleValidation',
+        path: '/automation/blocks/procedure/procedure-step-component',
+        tags: '@procedure @regression @helpx',
+      },
+      {
+        tcid: '2',
+        name: '@procedureComponentCaseSensitive',
+        path: '/automation/blocks/procedure/procedure-step-component',
+        tags: '@procedure @regression @helpx',
+      },
+      {
+        tcid: '3',
+        name: '@procedureComponentWrongProcedureClassName',
+        path: '/automation/blocks/procedure/procedure-step-component',
+        tags: '@procedure @regression @helpx',
+      },
+      {
+        tcid: '4',
+        name: '@procedureComponentDraftFunctionality',
+        path: '/automation/blocks/procedure/procedure-step-component',
+        tags: '@procedure @regression @helpx',
+      },
+      {
+        tcid: '5',
+        name: '@procedureComponentTextProperties',
+        path: '/automation/blocks/procedure/procedure-step-component',
+        tags: '@procedure @regression @helpx',
+      },
+      {
+        tcid: '6',
+        name: '@procedureComponentVideo',
+        path: '/automation/blocks/procedure/procedure-step-component',
+        tags: '@procedure @regression @helpx',
+      },
+      {
+        tcid: '1',
+        name: '@procedureAndStepValidation',
+        path: '/automation/blocks/procedure/procedure-step-component',
+        tags: '@procedure @regression @helpx',
+      },
+      {
+        tcid: '7',
+        name: '@procedureComponentFileDownload',
+        path: '/automation/blocks/procedure/procedure-step-component',
+        tags: '@procedure @regression @helpx',
+      },
+      {
+        tcid: '8',
+        name: '@procedureComponentBeforeAfter',
+        path: '/automation/blocks/procedure/procedure-step-component',
+        tags: '@procedure @regression @helpx',
+      },
+      {
+        tcid: '9',
+        name: '@procedureComponentCodeBlock',
+        path: '/automation/blocks/procedure/procedure-step-component',
+        tags: '@procedure @regression @helpx',
+      },
+      {
+        tcid: '10',
+        name: '@procedureComponentAllComponents',
+        path: '/automation/blocks/procedure/procedure-step-component',
+        tags: '@procedure @regression @helpx',
+      },
+      {
+        tcid: '11',
+        name: '@procedureComponentImageComponent',
+        path: '/automation/blocks/procedure/procedure-step-component',
+        tags: '@procedure @regression @helpx',
+      }
     ],
   };
   
\ No newline at end of file
diff --git a/global.setup_1.js b/global.setup_1.js
new file mode 100644
index 00000000..c1faaf0f
--- /dev/null
+++ b/global.setup_1.js
@@ -0,0 +1,151 @@
+import { exit } from 'process';
+const { execSync } = require('child_process');
+const { isBranchURLValid } = require('./libs/baseurl.js');
+const axios = require('axios');
+
+const MAIN_BRANCH_LIVE_URL = 'https://main--milo--adobecom.hlx.live';
+const STAGE_BRANCH_URL = 'https://milo.stage.adobe.com';
+const LOCALHOST_URL = 'http://localhost:3000';
+
+async function getGitHubPRBranchLiveUrl() {
+  // get the pr number
+  const prReference = process.env.GITHUB_REF;
+  const prNumber = prReference.split('/')[2];
+  
+  // get the pr branch name
+  const branch = process.env.GITHUB_HEAD_REF;    
+  const prBranch = branch.replace(/\//g, '-');
+
+  // get the org and repo 
+  const repository = process.env.GITHUB_REPOSITORY;
+  const repoParts = repository.split('/');    
+  const toRepoOrg = repoParts[0];  
+  const toRepoName = repoParts[1];
+ 
+  // Get the org and repo from the environment variables
+  const prFromOrg = process.env.prOrg;
+  const prFromRepoName = process.env.prRepo;
+
+  
+  let prBranchLiveUrl;
+
+  if (toRepoName === 'nala' || toRepoName === 'janus') {
+    prBranchLiveUrl = MAIN_BRANCH_LIVE_URL;
+  } else {
+    prBranchLiveUrl = `https://${prBranch}--${prFromRepoName}--${prFromOrg}.hlx.live`;
+  }
+
+  try {
+    if (await isBranchURLValid(prBranchLiveUrl)) {
+      process.env.PR_BRANCH_LIVE_URL = prBranchLiveUrl;
+    }
+    console.info('PR Repository : ', repository);
+    console.info('PR TO ORG     : ', toRepoOrg);
+    console.info('PR TO REPO    : ', toRepoName);
+    console.info('PR From ORG   : ', prFromOrg);
+    console.info('PR From REPO  : ', prFromRepoName);
+    console.info('PR Branch     : ', branch);
+    console.info('PR Branch(U)  : ', prBranch);
+    console.info('PR Number     : ', prNumber);
+    console.info('PR From Branch live url : ', prBranchLiveUrl);
+  } catch (err) {
+    console.error(`Error => Error in setting PR Branch test URL : ${prBranchLiveUrl}`);
+    console.info(`Note: PR branch test url  ${prBranchLiveUrl} is not valid, Exiting test execution.`);
+    process.exit(1);
+  }
+}
+
+async function getGitHubMiloLibsBranchLiveUrl() {
+  const repository = process.env.GITHUB_REPOSITORY;
+
+  let prBranchLiveUrl;
+  let miloLibs;
+
+  prBranchLiveUrl = process.env.PR_BRANCH_MILOLIBS_LIVE_URL;
+  miloLibs = process.env.MILO_LIBS;
+
+  try {
+    if (await isBranchURLValid(prBranchLiveUrl)) {
+      process.env.PR_BRANCH_LIVE_URL = prBranchLiveUrl;     
+    }
+    console.info('PR Repository : ', repository);
+    console.info('PR Branch live url : ', prBranchLiveUrl);
+    console.info('Milo Libs : ', miloLibs);
+  } catch (err) {
+    console.error(`Error => Error in setting PR Branch test URL : ${prBranchLiveUrl}`);
+    console.info(`Note: PR branch test url  ${prBranchLiveUrl} is not valid, Exiting test execution.`);
+    process.exit(1);
+  }
+}
+
+async function getCircleCIBranchLiveUrl() {
+  const stageBranchLiveUrl = STAGE_BRANCH_URL;
+
+  try {
+    if (await isBranchURLValid(stageBranchLiveUrl)) {
+      process.env.PR_BRANCH_LIVE_URL = stageBranchLiveUrl;
+    }
+    console.info('Stage Branch Live URL : ', stageBranchLiveUrl);
+  } catch (err) {
+    console.error('Error => Error in setting Stage Branch test URL : ', stageBranchLiveUrl);
+    console.info('Note: Stage branch test url is not valid, Exiting test execution.');
+    process.exit(1);
+  }
+}
+
+async function getLocalBranchLiveUrl() {
+  try {
+    const localGitRootDir = execSync('git rev-parse --show-toplevel', { encoding: 'utf-8' }).trim();
+
+    if (localGitRootDir) {
+      const gitRemoteOriginUrl = execSync('git config --get remote.origin.url', { cwd: localGitRootDir, encoding: 'utf-8' }).trim();
+      const match = gitRemoteOriginUrl.match(/github\.com\/(.*?)\/(.*?)\.git/);
+
+      if (match) {
+        const [localOrg, localRepo] = match.slice(1, 3);
+        const localBranch = execSync('git rev-parse --abbrev-ref HEAD', { cwd: localGitRootDir, encoding: 'utf-8' }).trim();
+        let localTestLiveUrl;
+
+        if (localRepo === 'nala' || localRepo === 'janus') {
+          localTestLiveUrl = MAIN_BRANCH_LIVE_URL;
+        } else {
+          localTestLiveUrl = LOCALHOST_URL;
+        }
+
+        if (await isBranchURLValid(localTestLiveUrl)) {
+          process.env.LOCAL_TEST_LIVE_URL = localTestLiveUrl;
+        }
+        console.info('Git ORG      : ', localOrg);
+        console.info('Git REPO     : ', localRepo);
+        console.info('Local Branch : ', localBranch);
+        console.info('Local Test Live URL    : ', process.env.LOCAL_TEST_LIVE_URL);
+      }
+    }
+  } catch (error) {
+    console.error(`Error => Error in setting local test URL : ${localTestLiveUrl}`);
+    console.info(`Note: Local or branch test url is not valid, Exiting test execution.`);
+    process.exit(1);
+  }
+}
+
+async function globalSetup() {
+  console.info('----Executing Global setup---------');
+
+  if (process.env.GITHUB_ACTIONS === 'true') {
+    console.info('---- Running Tests in the GitHub environment ---------');
+
+    if (process.env.MILO_LIBS_RUN === 'true') {
+      await getGitHubMiloLibsBranchLiveUrl();
+    } else {
+      await getGitHubPRBranchLiveUrl();
+    }
+  } else if (process.env.CIRCLECI) {
+    console.info('---- Running Tests in the CircleCI environment ---------');
+    await getCircleCIBranchLiveUrl();
+  } else {
+    console.info('---- Running Tests in the Local environment ---------');
+    await getLocalBranchLiveUrl();
+  }
+}
+
+export default globalSetup;
diff --git a/playwright.config.js b/playwright.config.js
index 0f656c10..6f89ad59 100644
--- a/playwright.config.js
+++ b/playwright.config.js
@@ -9,7 +9,7 @@ const envs = require('./envs/envs.js');
 const config = {
   testDir: './tests/milo',
   outputDir: './test-results',
-  globalSetup: './global.setup.js',
+  globalSetup: './global.setup_1.js',
   /* Maximum time one test can run for. */
   timeout: 30 * 1000,
   expect: {
diff --git a/selectors/helpx/beforeafter.page.js b/selectors/helpx/beforeafter.page.js
index 207b33e1..cadcd659 100644
--- a/selectors/helpx/beforeafter.page.js
+++ b/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']);
   }
 }
diff --git a/selectors/helpx/codeBlock.page.js b/selectors/helpx/codeBlock.page.js
index 9f863e0d..1feb0d0a 100644
--- a/selectors/helpx/codeBlock.page.js
+++ b/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');
diff --git a/selectors/helpx/draft.page.js b/selectors/helpx/draft.page.js
index 2d8e70c2..b4911387 100644
--- a/selectors/helpx/draft.page.js
+++ b/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;
@@ -34,5 +31,32 @@ export default class Draft {
       'codeBlock': { 'class': 'code language-as3 line-numbers draft' },
       'generic': { 'class': 'generic draft class1 class2' },
     };  
+
+    //draftPage for before after
+    this.codeAs3LineNumbersDraft = page.locator("//div[@class='code language-as3 line-numbers draft']");
+    this.beforeAfterSlider = page.locator("//div[@class='before-after-slider draft']").first();
+    this.horizontalBeforeAfterSlider = page.locator("//div[@class='before-after-slider horizontal draft']");
+    this.beforeAfterSliderDraft = page.locator("//div[@class='before-after-slider draft'][2]");
+    this.beforeAfterSliderDraftHorizontal = page.locator("//div[@class='before-after-slider draft horizontal']");
+    this.as3CodeSnippet = page.locator("//div[@class='code language-as3 line-numbers draft']");
+
+    //draft page for codeblock
+    this.codeColdFusionDraft = page.locator("//div[@class='code language-coldfusion draft']");
+    this.codeCPlusPlusDraft = page.locator("//div[@class='code language-c draft']");
+    this.codeCSSLineNumbersDraft = page.locator("//div[@class='code language-css draft line-number']");
+    this.codeJavaLineNumbersDraft = page.locator("//div[@class='code draft language-java line-numbers']");
+    this.codeJavaScriptDraft = page.locator("//div[@class='code language-javascript draft']");
+    this.codePHPDraft = page.locator("//div[@class='code draft language-php']");
+    this.codeSQLDraft = page.locator("//div[@class='code language-sql darft']");
+    this.codeXMLDraft = page.locator("//div[@class='code language-xml draft']");
+    this.codeShellDraft = page.locator("//div[@class='code draft language-shell']");
+    this.codePlainDraft = page.locator("//div[@class='code language-plain draft']");
+
+    //Draft Page for Generic
+    this.genericComponentsDraft = page.locator("//h1[@id='generic-components-draft']");
+    this.genericImageDraft1 = page.locator("//div[@class='generic draft'][1]");
+    this.genericImageDraft2 = page.locator("//div[@class='generic draft'][2]");
+    this.genericTextDraft = page.locator("//div[@class='generic draft'][3]");
+
   }
 };
diff --git a/selectors/helpx/procedure.page.js b/selectors/helpx/procedure.page.js
index 011e0a21..852e34e1 100644
--- a/selectors/helpx/procedure.page.js
+++ b/selectors/helpx/procedure.page.js
@@ -1,14 +1,87 @@
-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');
+
+    //Procedure and Step Component
+    //Title
+    this.procedureTitle = page.locator("//h1[@id='procedure-and-step-component']");
+    //First procedure Component
+    this.procedureforb2 = page.locator("//div[contains(@daa-lh,'b2|procedure|nopzn|nopzn')]");
+    this.procedureforb2Ol = page.locator("//div[@daa-lh='b2|procedure|nopzn|nopzn']/child::ol");
+    this.procedureforb2liFirst = page.locator("//div[@daa-lh='b2|procedure|nopzn|nopzn']/child::ol/li[contains(@class,'step')][1]");
+    
+
+    //procedure is not case sensitive
+    const xpathWithDaaLh = "//div[contains(@daa-lh, 'b4|procedure|nopzn|nopzn')]/ol[@class='stepList']/li[@class='step']/div[contains(text(), 'PROCEDURE-Capital letter')]";
+    this.procedurecapitalLetter = page.locator(xpathWithDaaLh).first();
+    const xpathForSecondElement = "//div[contains(@daa-lh, 'b5|procedure|nopzn|nopzn')]/ol[@class='stepList']/li[@class='step']/div[contains(.,'PROCEDURE- Capital Letter - Bold -Italic')]";
+    this.secondProcedureElement = page.locator(xpathForSecondElement).first();
+
+    const xpathForThirdElement = "//div[contains(@daa-lh, 'b6|procedure|nopzn|nopzn')]/ol[@class='stepList']/li[@class='step']//div[contains(.,'PROCEDURE-Capital Letter - Bold -Italic-Underline')]";
+    this.thirdProcedureElement = page.locator(xpathForThirdElement).first();
+
+    //Incorrect Procedure Name
+    const xpathForFailedProcedure = "//div[contains(@class,'proedure')][contains(@data-failed,'true')][contains(@data-reason,'Failed loading proedure block.')]";
+    this.failedProcedureElement = page.locator(xpathForFailedProcedure).first();
+
+    //verify Draft Procedure
+    const procedureDraft = "//li[contains(.,'Procedure Component with Draft Option')]/following-sibling::li[1][contains(.,'In Procedure Component, adding Text in the Step')]";
+    this.draftProcedure = page.locator(procedureDraft).first();  
+
+    //Text  in procedure
+    this.textInProcedureComponent = page.locator("//div[contains(@daa-lh,'b11|procedure|nopzn|nopzn')]/ol/li[1]/div/p[contains(.,'Some copy-paste features that you can try out with this latest updated workflow are given here.')]");
+    this.StrongtextInProcedureComponent = page.locator("//div[contains(@daa-lh,'b11|procedure|nopzn|nopzn')]/ol/li[2]/div/strong[contains(text(),'Continue')]");
+    this.thirdStepLink = page.locator("//div[contains(@daa-lh,'b11|procedure|nopzn|nopzn')]/ol/li[3]/div/strong/a[contains(@href,'https://account.adobe.com/plans')]");
+    this.iconinprocedureComponet = page.locator("//div[contains(@daa-lh,'b11|procedure|nopzn|nopzn')]/ol/li[6]/div/ol/li/span[contains(@class,'icon icon-objectives margin-left margin-right')]");
+    this.notealertinprocedure = page.locator("//div[contains(@daa-lh,'b11|procedure|nopzn|nopzn')]/ol/li[6]/child::div/child::div[contains(@class,'note alert')]");
+    this.noteiconinprocedure = page.locator("//div[contains(@daa-lh,'b11|procedure|nopzn|nopzn')]/ol/li[6]/child::div/child::div[contains(@class,'note alert')]/span[contains(@class,'note-icon')]");
+    this.notecautionInprocedure = page.locator("//div[contains(@daa-lh,'b11|procedure|nopzn|nopzn')]/ol/li[8]/div/div[contains(@class,'note caution')]");
+    this.notetipinProcedure = page.locator("//div[contains(@daa-lh,'b11|procedure|nopzn|nopzn')]/ol/li[8]/div/div[contains(@class,'note tip')]");
+  
+    //Images in procedure
+    this.webpImageinProcedure = page.locator("//div[@class='procedure']/ol[@class='stepList']/li[@class='step'][1]//img[@title='attach_email_mfa']");
+    this.pngImageInprocedure = page.locator("(//img[@loading='lazy'])[1]");
+    const xpathLocator = "//div[contains(@daa-lh,'b13|procedure|nopzn|nopzn')]/ol/li[3]/div/p/em[contains(text(),'Great. I will process this for you now')]";
+    this.textBeforeImageInProcedure = page.locator(xpathLocator);
+    this.imageafterTextInProcedure = page.locator(`${xpathLocator}/following::p[1]`);
+    this.urlBasedURLInProcedure = page.locator("//div[contains(@daa-lh,'b13|procedure|nopzn|nopzn')]/ol/li[4]/descendant::a[contains(@href,'/automation/blocks/procedure/')]");
+
+
+    //Videos In Procedure
+    this.videoinprocedure = page.locator("//div[@class='procedure']//li[@class='step'][1]//video[@controls]");
+    this.youtubevideoinprocedure = page.locator("//div[@class='procedure']//li[@class='step'][2]//iframe[contains(@src, 'youtube.com')]");
+
+    //Download Component
+    this.pdfforprocedure = page.locator("//div[@class='procedure']//li[@class='step'][1]//div[@class='download']//a[@class='download-button' and contains(@href, 'SKU%20search%20in%20Hendrix.pdf')]");
+    this.xlsxforprocedure = page.locator("//div[@class='procedure']//li[@class='step'][2]//div[@class='download']//a[@class='download-button' and contains(@href, 'All%20Products_080213.xls')]");
+    this.pptforprocedure = page.locator("//div[@class='procedure']//li[@class='step'][3]//div[@class='download']//a[@class='download-button' and contains(@href, 'cct_save_tagging-hendrix.pptx')]");
+
+    //BeforeAfter component
+    this.beforeafterfirst = page.locator("//input[@orient='vertical']");
+    this.beforeaftersecond = page.locator("//div[@class='procedure']//li[@class='step'][2]//div[@class='before-after-slider hidden-tablet']");
+    this.beforeafterthird = page.locator("//div[@class='procedure']//li[@class='step'][3]//div[@class='before-after-slider draft hidden-desktop hidden-mobile']");
+
+    //code block component
+   this.as3Inprocedure =  page.locator("//div[@class='procedure']//li[@class='step'][1]//div[@class='code language-as3']").first();
+   this.cplusplusInprocedure =  page.locator("//div[@class='procedure']//li[@class='step'][2]//div[@class='code language-c++ line-numbers']").first();
+   this.sqlInprocedure =  page.locator("//div[@class='procedure']//li[@class='step'][3]//div[@class='code language-sql draft']").first();
+
+   //All components 
+    this.codeBlock = page.locator("//div[@class='procedure']//li[@class='step'][1]//div[@class='code language-as3']").first();
+    this.imageWithinProcedure = page.locator("//div[@class='procedure']//li[@class='step'][2]//h1[@id='image-within-procedure']/following-sibling::p/picture");
+    this.ambientVideo = page.locator("//div[@class='procedure']//li[@class='step'][3]//p[contains(text(),'Ambient video')]").first();
+    this.downloadSection = page.locator("//div[@class='procedure']//li[@class='step'][4]//div[@class='download']");
+    this.miloVideo = page.locator("//div[@class='procedure']//li[@class='step'][5]//div[@class='milo-video']/iframe");
+    this.beforeAfterSlider = page.locator("//div[@class='procedure']//li[@class='step'][6]//div[@class='before-after-slider hidden-mobile']");
+    this.listWithLinks = page.locator("//div[@class='procedure']//li[@class='step'][7]//ul");
+    this.noteUpdate = page.locator("//div[@class='procedure']//li[@class='step'][8]//div[@class='note alert']");
+    this.noteAddReason = page.locator("//div[@class='procedure']//li[@class='step'][9]//div[@class='note caution']");
+
   }
 }
diff --git a/tests/helpx/beforeafter.test.js b/tests/helpx/beforeafter.test.js
index 65a9ffbf..5a934079 100644
--- a/tests/helpx/beforeafter.test.js
+++ b/tests/helpx/beforeafter.test.js
@@ -1,8 +1,10 @@
 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;
 
 test.beforeAll(async ({ browser }) => {
   if (process.env.HLX_TKN !== undefined && process.env.HLX_TKN !== '') {
@@ -19,28 +21,29 @@ 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.waitForLoadState('networkidle');
+
 });
 
-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.describe('BeforeAfter Sanity test suite', () => {
+
+  // Before After Sanity Checks:
+  test(`${features[0].name}, ${features[0].tags}`, async ({ baseURL }) => {
+    const BeforeAfterTag = features[0].path;
+    await page.goto(`${config.use?.baseURL}${BeforeAfterTag}`);
+    await page.waitForLoadState('networkidle');
+    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();
+    });
   });
 });
diff --git a/tests/helpx/codeBlock.test.js b/tests/helpx/codeBlock.test.js
index 1e29adac..3facc7c1 100644
--- a/tests/helpx/codeBlock.test.js
+++ b/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,49 @@ 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.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(`${features[0].name}, ${features[0].tags}`, async ({}) => {
+    //Go to CodeBlock Page
+    await page.goto(`${config.use?.baseURL}${codeblocktag}`);
+    await page.waitForLoadState('networkidle');
+    console.info(`[Test Page]: ${config.use?.baseURL}${codeblocktag}`);
+
+    //verify its navigating to code block page only
     await test.step('Navigate to CodeBlock page', async () => {
-      await expect(page).toHaveURL(`${baseURL}${features[0].path}`);
+      await expect(page).toHaveURL(`${config.use?.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 +78,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();
   });
 });
diff --git a/tests/helpx/draft.test.js b/tests/helpx/draft.test.js
index bd8c61d1..d398c742 100644
--- a/tests/helpx/draft.test.js
+++ b/tests/helpx/draft.test.js
@@ -1,8 +1,15 @@
 import { expect, test } from '@playwright/test';
 import { features } from '../../features/helpx/draft.spec.js';
-import { Draft } from '../../selectors/helpx/draft.page.js';
+import Draft from '../../selectors/helpx/draft.page.js';
+import config from '../../configs/helpx.config.js';
+import { WebUtil } from '../../libs/webutil.js';
+
 
 let draft;
+let page;
+let draftTag= features[0].path;
+let cssProps; 
+const helpxbaseURL = config.use?.baseURL;
 
 test.beforeAll(async ({ browser }) => {
   if (process.env.HLX_TKN !== undefined && process.env.HLX_TKN !== '') {
@@ -19,80 +26,109 @@ 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();
   draft = new Draft(page);
-  await page.goto(`${baseURL}${features[0].path}`);
-  await page.waitForLoadState('networkidle');
+  cssProps = new WebUtil(page);
+
 });
 
 test.describe('Draft sanity test suite', () => {
   // Draft Sanity Checks:
-  test(`${features[0].name}, ${features[0].tags}`, async ({
-    page,
-    baseURL,
-  }) => {
-    console.info(`[Test Page]: ${baseURL}${features[0].path}`);
+  test(`${features[0].name}, ${features[0].tags}`, async ({baseURL}) => {
+    await page.goto(`${helpxbaseURL}${draftTag}`);
+    await page.waitForLoadState('networkidle');
+    console.log(`[Test Page]: ${baseURL}${draftTag}`);
     await test.step('Navigate to Draft page', async () => {
-      await expect(page).toHaveURL(`${baseURL}${features[0].path}`);
+    await expect(page).toHaveURL(`${baseURL}${draftTag}`);
     });
 
     // Check procedure present
-    await expect(draft.procedure).toBeVisible();
+    await expect(draft.procedure).not.toBeVisible();
 
     // Check beforeAftr present
-    await expect(draft.beforeAftr).toBeVisible();
+    await expect(draft.beforeAftr).not.toBeVisible();
 
     // Check codeBlock present
-    await expect(draft.codeBlock).toBeVisible();
+    await expect(draft.codeBlock).not.toBeVisible();
 
     // Check generic present
-    await expect(draft.generic).toBeVisible();
-
-    expect(
-      await WebUtil.verifyCSS(
-        await this.procedure,
-        this.cssProperties['procedure']
-      )
-    ).toBeTruthy();
-    expect(
-      await WebUtil.verifyCSS(
-        await this.beforeAftr,
-        this.cssProperties['beforeAftr']
-      )
-    ).toBeTruthy();
-    expect(
-      await WebUtil.verifyCSS(
-        await this.codeBlock,
-        this.cssProperties['codeBlock']
-      )
-    ).toBeTruthy();
-    expect(
-      await WebUtil.verifyCSS(await this.generic, this.cssProperties['generic'])
-    ).toBeTruthy();
-
-    expect(
-      await WebUtil.verifyAttributes(
-        await this.procedure,
-        this.attProperties['procedure']
-      )
-    ).toBeTruthy();
-    expect(
-      await WebUtil.verifyAttributes(
-        await this.beforeAftr,
-        this.attProperties['beforeAftr']
-      )
-    ).toBeTruthy();
-    expect(
-      await WebUtil.verifyAttributes(
-        await this.codeBlock,
-        this.attProperties['codeBlock']
-      )
-    ).toBeTruthy();
-    expect(
-      await WebUtil.verifyAttributes(
-        await this.generic,
-        this.attProperties['generic']
-      )
-    ).toBeTruthy();
+    await expect(draft.generic).not.toBeVisible();
+
+    //verify CSS property of a Draft page
+    expect(await cssProps.verifyCSS_(await draft.procedure, draft.cssProperties['procedure'])).toBeTruthy();
+    expect(await cssProps.verifyCSS_(await draft.beforeAftr, draft.cssProperties['beforeAftr'])).toBeTruthy();
+    expect(await cssProps.verifyCSS_(await draft.codeBlock, draft.cssProperties['codeBlock'])).toBeTruthy();
+    expect(await cssProps.verifyCSS_(await draft.generic, draft.cssProperties['generic'])).toBeTruthy();
+    
+    //Verify Attribute of a Draft Page
+    expect(await cssProps.verifyAttributes_(await draft.procedure, draft.attProperties['procedure'])).toBeTruthy();
+    expect(await cssProps.verifyAttributes_(await draft.beforeAftr, draft.attProperties['beforeAftr'])).toBeTruthy();
+    expect(await cssProps.verifyAttributes_(await draft.codeBlock, draft.attProperties['codeBlock'])).toBeTruthy();
+    expect(await cssProps.verifyAttributes_(await draft.generic, draft.attProperties['generic'])).toBeTruthy();
+    
+  });
+});
+
+
+test.describe('Draft on Before After Component',()=>{
+
+
+  test(`${features[1].name}, ${features[1].tags}`, async () => {
+    const BeforeAfterurl = `${helpxbaseURL}${features[1].path}`;
+    await page.goto(BeforeAfterurl);
+    await page.waitForLoadState('networkidle');
+    await console.log("BeforeAfterurl: "+BeforeAfterurl);
+
+    //verify components are not visible
+    await expect(draft.codeAs3LineNumbersDraft).not.toBeVisible();
+    await expect(draft.beforeAfterSlider).not.toBeVisible();
+    await expect(draft.horizontalBeforeAfterSlider).not.toBeVisible();
+    await expect(draft.beforeAfterSliderDraft).not.toBeVisible();
+    await expect(draft.beforeAfterSliderDraftHorizontal).not.toBeVisible();
+    await expect(draft.as3CodeSnippet).not.toBeVisible();
+
+    
+  });
+});
+
+test.describe('Draft on Code Block Component',()=>{
+
+
+  test(`${features[2].name}, ${features[2].tags}`, async () => {
+    const codeblockdrafturl = `${helpxbaseURL}${features[2].path}`;
+    await page.goto(codeblockdrafturl);
+    await page.waitForLoadState('networkidle');
+    await console.log("CodeBlockDrafturl: "+codeblockdrafturl);
+
+    //verify components are not visible
+    await expect(draft.codeAs3LineNumbersDraft).not.toBeVisible();
+    await expect(draft.codeColdFusionDraft).not.toBeVisible();
+    await expect(draft.codeCPlusPlusDraft).not.toBeVisible();
+    await expect(draft.codeCSSLineNumbersDraft).not.toBeVisible();
+    await expect(draft.codeJavaLineNumbersDraft).not.toBeVisible();
+    await expect(draft.codeJavaScriptDraft).not.toBeVisible();
+    await expect(draft.codePHPDraft).not.toBeVisible();
+    await expect(draft.codeSQLDraft).toBeVisible();
+    await expect(draft.codeXMLDraft).not.toBeVisible();
+    await expect(draft.codeShellDraft).not.toBeVisible();
+    await expect(draft.codePlainDraft).not.toBeVisible();
+  });
+});
+
+test.describe('Draft Component on Generic',()=>{
+
+
+  test(`${features[3].name}, ${features[3].tags}`, async () => {
+    const genericDraftURl = `${helpxbaseURL}${features[3].path}`;
+    await page.goto(genericDraftURl);
+    await page.waitForLoadState('networkidle');
+    await console.log("genericDraftURl: "+genericDraftURl);
+
+    await expect(draft.genericComponentsDraft).toBeVisible();
+    await expect(draft.genericImageDraft1).not.toBeVisible();
+    await expect(draft.genericImageDraft2).not.toBeVisible();
+    await expect(draft.genericTextDraft).not.toBeVisible();
+      
   });
 });
+
diff --git a/tests/helpx/procedure.test.js b/tests/helpx/procedure.test.js
index cb96ceee..106c628f 100644
--- a/tests/helpx/procedure.test.js
+++ b/tests/helpx/procedure.test.js
@@ -1,10 +1,13 @@
 import { expect, test } from '@playwright/test';
 import { features } from '../../features/helpx/procedure.spec.js';
-import { Procedure } from '../../selectors/helpx/procedure.page.js';
+import Procedure from '../../selectors/helpx/procedure.page.js';
+import helpxconfig from '../../configs/helpx.config.js';
 
 let procedure;
+let page;
 
 test.beforeAll(async ({ browser }) => {
+  //Verify TOKEN is set at environment variables
   if (process.env.HLX_TKN !== undefined && process.env.HLX_TKN !== '') {
     // The environment variable is set and has a non-blank value
     console.log('Environment variable is set and not blank');
@@ -19,35 +22,195 @@ 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();
-  procedure = new Procedure(page);
-  await page.goto(`${baseURL}${features[0].path}`);
-  await page.waitForLoadState('networkidle');
+  //create a new page
+  page = await context.newPage();
+  procedure = new Procedure(page); //Attached Xpaths procedure page to playwright page
 });
 
 test.describe('Procedure Sanity test suite', () => {
-  // Procedure Sanity Checks:
-  test(`${features[0].name}, ${features[0].tags}`, async ({
-    page,
-    baseURL,
-  }) => {
-    console.info(`[Test Page]: ${baseURL}${features[0].path}`);
+  //Procedure Sanity Checks:
+  test(`${features[0].name}, ${features[0].tags}`, async ({ baseURL }) => {
+    let procedureTag = features[0].path;
+    await page.goto(`${helpxconfig.use?.baseURL}${procedureTag}`);
+    await page.waitForLoadState('networkidle');
+    console.log(`[Test Page]: ${baseURL}${procedureTag}`);
+    //I verify url of the page
     await test.step('Navigate to Procedure page', async () => {
-      await expect(page).toHaveURL(`${baseURL}${features[0].path}`);
+      await expect(page).toHaveURL(`${baseURL}${procedureTag}.html`);
     });
 
+    //I verify procedure component is present with step,image,TextBold
     await test.step('Check Procedure page content', async () => {
       // Check procedure:
       await expect(procedure.procedure).toBeVisible();
-
-      // Check procedure step:
-      await expect(procedure.procedureStep).toBeVisible();
-
+      //check Step count
+      await expect(procedure.procedureStep).toHaveCount(3);
       // Check image in procedure:
       await expect(procedure.procedureImage).toBeVisible();
-
       // Check bold text in procedure:
       await expect(procedure.procedureTxtBold).toBeVisible();
     });
   });
+
 });
+
+async function launchprocedurepage(){
+  //All Components page
+ let procedureTag = features[1].path;
+ await page.goto(`${helpxconfig.use?.baseURL}${procedureTag}`);
+ await page.waitForLoadState('networkidle');
+ console.log(`[All component procedure Page]: ${helpxconfig.use?.baseURL}${procedureTag}`);
+}
+
+
+test.describe("All Components in Procedure component",()=>{
+
+  //Procedure and Step Component
+  test(`${features[1].name}, ${features[1].tags}`, async () => {
+    await launchprocedurepage();
+     const procedureTitle = procedure.procedureTitle;
+     //verify Title Text and CSS values
+     await expect(procedureTitle).toBeVisible();
+     await expect(procedureTitle).toHaveCSS('max-width', '1050px');
+     await expect(procedureTitle).toHaveCSS('line-height', '41.4px');
+     await expect(procedureTitle).toHaveCSS('font-size', '36px');
+     await expect(procedureTitle).toHaveCSS('font-weight', '500');
+     await expect(procedureTitle).toHaveCSS('text-align', 'left');
+     await expect(procedureTitle).toHaveCSS('word-break', 'break-word');
+     await expect(procedureTitle).toHaveCSS('padding', '0px 40px');
+     await expect(procedureTitle).toHaveCSS('min-height', '72px');
+     await expect(procedureTitle).toHaveCSS('display', 'flex');
+     await expect(procedureTitle).toHaveCSS('flex-direction', 'column');
+     await expect(procedureTitle).toHaveCSS('justify-content', 'center');
+     await expect(procedureTitle).toHaveText("Procedure and Step Component")
+   });
+ 
+   test(`${features[2].name}, ${features[2].tags}`, async()=>{
+    await launchprocedurepage();
+     await expect(procedure.procedurecapitalLetter).toBeVisible();
+     await expect(procedure.secondProcedureElement).toBeVisible();
+     await expect(procedure.thirdProcedureElement).toBeVisible();
+   })
+ 
+   test(`${features[3].name}, ${features[3].tags}`, async()=>{
+    await launchprocedurepage();
+     await expect(procedure.failedProcedureElement).toBeVisible();
+   })
+ 
+   test(`${features[4].name}, ${features[4].tags}`, async () => {
+    await launchprocedurepage();
+     await expect(procedure.draftProcedure).toBeVisible();
+   });
+ 
+   test(`${features[5].name}, ${features[5].tags}`, async()=>{
+    await launchprocedurepage();
+     // Verifying visibility for each element
+     await expect(procedure.textInProcedureComponent).toBeVisible();
+     await expect(procedure.StrongtextInProcedureComponent).toBeVisible();
+     await expect(procedure.thirdStepLink).toBeVisible();
+     await expect(procedure.iconinprocedureComponet).toBeVisible();
+     await expect(procedure.notealertinprocedure).toBeVisible();
+     await expect(procedure.noteiconinprocedure).toBeVisible();
+     await expect(procedure.notecautionInprocedure).toBeVisible();
+     await expect(procedure.notetipinProcedure).toBeVisible();
+   })
+ 
+ 
+   test(`${features[6].name}, ${features[6].tags}`, async()=>{
+     await launchprocedurepage();
+     const scrollToHeight = 4500;
+ 
+     await page.evaluate((scrollToHeight) => {
+         window.scrollTo(0, scrollToHeight);
+     }, scrollToHeight);
+ 
+     await page.waitForTimeout(1000); 
+     await expect(procedure.videoinprocedure).toBeVisible();
+     await expect(procedure.youtubevideoinprocedure).toBeVisible();
+   })
+ 
+   test(`${features[7].name}, ${features[7].tags}`, async()=>{
+    await launchprocedurepage(); 
+    const scrollToHeight = 4700;
+ 
+     await page.evaluate((scrollToHeight) => {
+         window.scrollTo(0, scrollToHeight);
+     },  scrollToHeight);
+     await page.waitForTimeout(1000); 
+ 
+     await expect(procedure.pdfforprocedure).toBeVisible();
+     await expect(procedure.xlsxforprocedure).toBeVisible();
+     await expect(procedure.pptforprocedure).toBeVisible();
+ 
+   })
+ 
+   test(`${features[8].name}, ${features[8].tags}`,async()=>{
+    await launchprocedurepage(); 
+    const scrollToHeight = 5000;
+ 
+     await page.evaluate((scrollToHeight) => {
+         window.scrollTo(0, scrollToHeight);
+     }, scrollToHeight);
+ 
+     await page.waitForTimeout(1000); 
+    await  expect(procedure.beforeafterfirst).toBeVisible();
+    await  expect(procedure.beforeaftersecond).toBeVisible();
+ 
+ 
+   })
+ 
+ 
+   test(`${features[9].name}, ${features[9].tags}`,async()=>{
+    await launchprocedurepage();    
+     const scrollToHeight = 6000;
+ 
+     await page.evaluate((scrollToHeight) => {
+         window.scrollTo(0, scrollToHeight);
+     }, scrollToHeight);
+ 
+     await page.waitForTimeout(1000); 
+     await expect(procedure.as3Inprocedure).toBeVisible();
+     await expect(procedure.cplusplusInprocedure).toBeVisible();
+     expect(procedure.sqlInprocedure).toBe.length==2;
+ 
+   })
+ 
+ 
+   test(`${features[10].name}, ${features[10].tags}`,async()=>{
+    await launchprocedurepage();
+     const scrollToHeight = 7500;
+ 
+     await page.evaluate((scrollToHeight) => {
+         window.scrollTo(0, scrollToHeight);
+     }, scrollToHeight);
+ 
+     await page.waitForTimeout(5000); 
+     await expect(procedure.codeBlock).toBeVisible();
+     await expect(procedure.imageWithinProcedure).toBeVisible();
+     await expect(procedure.ambientVideo).toBeVisible();
+     await expect(procedure.downloadSection).toBeVisible();
+     await expect(procedure.miloVideo).toBeVisible();
+     await expect(procedure.beforeAfterSlider).toBeVisible();
+     await expect(procedure.listWithLinks).toBeVisible();
+     await expect(procedure.noteUpdate).toBeVisible();
+     await expect(procedure.noteAddReason).toBeVisible();
+ 
+   })
+ 
+   test(`${features[11].name}, ${features[11].tags}`, async()=>{
+    await launchprocedurepage();
+    const scrollToHeight = 2500;
+    await page.evaluate((scrollToHeight) => {
+        window.scrollTo(0, scrollToHeight);
+    }, scrollToHeight);
+
+    await page.waitForTimeout(1000); 
+    // Verifying visibility for image elements
+    await expect(procedure.webpImageinProcedure).toBeVisible();
+    await expect(procedure.pngImageInprocedure).toBeVisible();
+    await expect(procedure.textBeforeImageInProcedure).toBeVisible();
+    await expect(procedure.imageafterTextInProcedure).toBeVisible();
+    await expect(procedure.urlBasedURLInProcedure).toBeVisible();
+  })
+})
+
diff --git a/tests/milo/accordion.block.test.js b/tests/milo/accordion.block.test.js
index efdda553..4c9e83e0 100644
--- a/tests/milo/accordion.block.test.js
+++ b/tests/milo/accordion.block.test.js
@@ -6,6 +6,8 @@ import AccordionBlock from '../../selectors/milo/accordion.block.page.js';
 let webUtil;
 let accordion;
 let consoleErrors = [];
+
+const miloLibs = process.env.MILO_LIBS || '';
 const knownConsoleErrors = ['Access-Control-Allow-Origin','Failed to load resource: net::ERR_FAILED'];
 
 test.describe('Milo Accordion Block test suite', () => {
@@ -26,13 +28,13 @@ test.describe('Milo Accordion Block test suite', () => {
 
   // Test 0 : Accordion
   test(`${features[0].name},${features[0].tags}`, async ({ page, baseURL }) => {
-    console.info(`[Test Page]: ${baseURL}${features[0].path}`);
+    console.info(`[Test Page]: ${baseURL}${features[0].path}${miloLibs}`);
     const { data } = features[0];
 
     await test.step('step-1: Go to Accordion block test page', async () => {
-      await page.goto(`${baseURL}${features[0].path}`);
+      await page.goto(`${baseURL}${features[0].path}${miloLibs}`);
       await page.waitForLoadState('domcontentloaded');
-      await expect(page).toHaveURL(`${baseURL}${features[0].path}`);
+      await expect(page).toHaveURL(`${baseURL}${features[0].path}${miloLibs}`);
     });
 
     await test.step('step-2: Verify Accrodion block content/specs', async () => {
@@ -68,13 +70,13 @@ test.describe('Milo Accordion Block test suite', () => {
 
   // Test 1 : Accordion (seo) 
   test(`${features[1].name},${features[1].tags}`, async ({ page, baseURL }) => {
-    console.info(`[Test Page]: ${baseURL}${features[1].path}`);
+    console.info(`[Test Page]: ${baseURL}${features[1].path}${miloLibs}`);
     const { data } = features[1];
 
     await test.step('step-1: Go to Accordion block test page', async () => {
-      await page.goto(`${baseURL}${features[1].path}`);
+      await page.goto(`${baseURL}${features[1].path}${miloLibs}`);
       await page.waitForLoadState('domcontentloaded');
-      await expect(page).toHaveURL(`${baseURL}${features[1].path}`);
+      await expect(page).toHaveURL(`${baseURL}${features[1].path}${miloLibs}`);
     });
 
     await test.step('step-2: Verify Accrodion seo block specs', async () => {      
@@ -102,13 +104,13 @@ test.describe('Milo Accordion Block test suite', () => {
 
 // Test 2 : Accordion (quiet, max-width-12-desktop-large)  
   test(`${features[2].name},${features[2].tags}`, async ({ page, baseURL }) => {
-    console.info(`[Test Page]: ${baseURL}${features[2].path}`);
+    console.info(`[Test Page]: ${baseURL}${features[2].path}${miloLibs}`);
     const { data } = features[2];
 
     await test.step('step-1: Go to Accordion block test page', async () => {
-      await page.goto(`${baseURL}${features[2].path}`);
+      await page.goto(`${baseURL}${features[2].path}${miloLibs}`);
       await page.waitForLoadState('domcontentloaded');
-      await expect(page).toHaveURL(`${baseURL}${features[2].path}`);
+      await expect(page).toHaveURL(`${baseURL}${features[2].path}${miloLibs}`);
     });
 
     await test.step('step-2: Verify Accrodion block content/specs', async () => {
diff --git a/utils/reporters/base-reporter.js b/utils/reporters/base-reporter.js
index 4a14057a..25543840 100644
--- a/utils/reporters/base-reporter.js
+++ b/utils/reporters/base-reporter.js
@@ -93,7 +93,9 @@ class BaseReporter {
     const totalTests = this.results.length;
     const passPercentage = ((this.passedTests / totalTests) * 100).toFixed(2);
     const failPercentage = ((this.failedTests / totalTests) * 100).toFixed(2);
-    let envURL = process.env.PR_BRANCH_LIVE_URL || this.config.projects[0].use.baseURL;
+    const miloLibs = process.env.MILO_LIBS || '';
+    const prBranchUrl = process.env.PR_BRANCH_LIVE_URL + miloLibs
+    let envURL = prBranchUrl || this.config.projects[0].use.baseURL;
     let exeEnv = 'Local Environment';
     let runUrl = 'Local Environment';
     let runName = 'Nala Local Run';