diff --git a/features/milo/htmlextn.spec.js b/features/milo/htmlextn.spec.js
index eef54622..b5f372e9 100644
--- a/features/milo/htmlextn.spec.js
+++ b/features/milo/htmlextn.spec.js
@@ -2,21 +2,21 @@ module.exports = {
   name: 'HTML Extension',
   features: [
     {
-      name: '@Html Extn',
+      name: '@Html Extn for bcom',
       path: [
         '/customer-success-stories',
         '/customer-success-stories/jaguar-land-rover-case-study',
         '/customer-success-stories/abb-case-study',
         '/customer-success-stories/dentsu-isobar-case-study',
-        '/blog/',
         '/jp/customer-success-stories/adobe-experience-cloud-case-study',
       ],
       envs: '@bacom_prod',
       tags: '@htmlextn',
     },
     {
-      name: '@Html Extn',
-      path: '/en/publish/2023/02/01/see-you-in-vegas-adobe-summit-2023-reg-open',
+      name: '@Html Extn for Blog',
+      path: [
+        '/en/publish/2023/02/01/see-you-in-vegas-adobe-summit-2023-reg-open'],
       envs: '@blog_prod',
       tags: '@htmlextn',
     },
diff --git a/features/milo/zpattern.block.spec.js b/features/milo/zpattern.block.spec.js
index c80bf143..2827a529 100644
--- a/features/milo/zpattern.block.spec.js
+++ b/features/milo/zpattern.block.spec.js
@@ -6,11 +6,29 @@ module.exports = {
       name: '@ZPattern',
       path: '/drafts/nala/blocks/zpattern/z-pattern',
       data: {
-        detailText: 'Detail M 12/15',
-        h2Text: 'Heading XS 18/22 Media (small)',
-        bodyText: 'Body S 16/24 Lorem ipsum dolor sit amet',
-        blueButtonText: 'Learn More',
-        outlineButtonText: 'Watch the Video',
+        headingText: 'Medium Intro Text (optional)',
+        introText: 'Perspiciatis unde omnis iste natus error',
+        mediaBlockCount: 3,
+        mediaBlocks: [
+          {
+            detailText: 'Detail M 12/15',
+            h2Text: 'Heading M 24/30 z-pattern medium',
+            bodyText: 'Body S 16/24 Lorem ipsum dolor sit amet',
+            blueButtonText: 'learn more',
+          },
+          {
+            detailText: 'Detail M 12/15',
+            h2Text: 'Heading M 24/30 z-pattern medium',
+            bodyText: 'Body S 16/24 Lorem ipsum dolor sit amet',
+            blueButtonText: 'learn more',
+          },
+          {
+            detailText: 'Detail M 12/15',
+            h2Text: 'Heading M 24/30 z-pattern medium',
+            bodyText: 'Body S 16/24 Lorem ipsum dolor sit amet',
+            blueButtonText: 'learn more',
+          },
+        ],
       },
       tags: '@zpattern @smoke @regression @milo',
     },
@@ -18,6 +36,31 @@ module.exports = {
       tcid: '1',
       name: '@ZPattern (small)',
       path: '/drafts/nala/blocks/zpattern/z-pattern-small',
+      data: {
+        headingText: 'Small (default) Intro Text (optional)',
+        introText: 'Media blocks may use one of three background colors',
+        mediaBlockCount: 3,
+        mediaBlocks: [
+          {
+            detailText: 'Detail M 12/15',
+            h2Text: 'Heading XS 18/22 z-pattern small',
+            bodyText: 'Body S 16/24 Lorem ipsum dolor sit amet',
+            blueButtonText: 'learn more',
+          },
+          {
+            detailText: 'Detail M 12/15',
+            h2Text: 'Heading XS 18/22 z-pattern small',
+            bodyText: 'Body S 16/24 Lorem ipsum dolor sit amet',
+            blueButtonText: 'learn more',
+          },
+          {
+            detailText: 'Detail M 12/15',
+            h2Text: 'Heading XS 18/22 z-pattern small',
+            bodyText: 'Body S 16/24 Lorem ipsum dolor sit amet',
+            blueButtonText: 'learn more',
+          },
+        ],
+      },    
       tags: '@zpattern @zpattern-small @smoke @regression @milo',
     },
 
@@ -25,12 +68,63 @@ module.exports = {
       tcid: '2',
       name: '@Zpattern (large)',
       path: '/drafts/nala/blocks/zpattern/z-pattern-large',
+      data: {
+        headingText: 'Large Intro Text (optional)',
+        introText: 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium',
+        mediaBlockCount: 3,
+        mediaBlocks: [
+          {
+            detailText: 'Detail L 16/20',
+            h2Text: 'Heading XL 36/45 z-pattern large',
+            bodyText: 'Body M 18/27 Lorem ipsum dolor sit amet',
+            blueButtonText: 'learn more',
+          },
+          {
+            detailText: 'Detail L 16/20',
+            h2Text: 'Heading XL 36/45 z-pattern large',
+            bodyText: 'Body M 18/27 Lorem ipsum dolor sit amet',
+            blueButtonText: 'learn more',
+          },
+          {
+            detailText: 'Detail L 16/20',
+            h2Text: 'Heading XL 36/45 z-pattern large',
+            bodyText: 'Body M 18/27 Lorem ipsum dolor sit amet',
+            blueButtonText: 'learn more',
+          },
+        ],
+      },      
       tags: '@zpattern @zpattern-large @smoke @regression @milo',
     },
+
     {
       tcid: '3',
       name: '@Zpattern (dark)',
       path: '/drafts/nala/blocks/zpattern/z-pattern-dark',
+      data: {
+        headingText: 'Intuitive block authoring',
+        introText: 'Supports alternating or inline authoring preferences',
+        mediaBlockCount: 3,
+        mediaBlocks: [
+          {
+            detailText: 'Detail M 12/15',
+            h2Text: 'Heading M 24/30 z-pattern medium',
+            bodyText: 'Body S 16/24 Lorem ipsum dolor sit amet',
+            blueButtonText: 'Learn More',
+          },
+          {
+            detailText: 'Detail M 12/15',
+            h2Text: 'Heading M 24/30 z-pattern medium',
+            bodyText: 'Body S 16/24 Lorem ipsum dolor sit amet',
+            blueButtonText: 'Learn More',
+          },
+          {
+            detailText: 'Detail M 12/15',
+            h2Text: 'Heading M 24/30 z-pattern medium',
+            bodyText: 'Body S 16/24 Lorem ipsum dolor sit amet',
+            blueButtonText: 'Learn More',
+          },
+        ],
+      },      
       tags: '@zpattern @zpattern-dark @smoke @regression @milo',
     },
   ],
diff --git a/selectors/milo/columns.block.page.js b/selectors/milo/columns.block.page.js
index 4c4994d3..6c9f4de5 100644
--- a/selectors/milo/columns.block.page.js
+++ b/selectors/milo/columns.block.page.js
@@ -2,10 +2,10 @@ import { expect } from '@playwright/test';
 import { WebUtil } from '../../libs/webutil.js';
 
 export default class Columns {
-  constructor(page) {
+  constructor(page, nth = 0) {
     this.page = page;
     // columns  locators
-    this.column = this.page.locator('.columns');
+    this.column = this.page.locator('.columns').nth(nth);
     this.rows = this.column.locator('.row');
     this.columns = this.column.locator('.col');
 
@@ -52,124 +52,4 @@ export default class Columns {
       'columns-contained-table': { 'class': 'columns contained columns-table' },
     };
   }
-
-  /**
- * Verifies the visibility, css, attributes, styles, of elements or sections of
- * the specified Columns block.
- * @param {string} columnType - The type of the Columns block to verify.
- * Possible values are 'columns', 'columns (contained)', 'columns (contained,middle)',and
- * columns (table),columns (contained,table),
- * @returns {Promise<boolean>} - Returns true if the specified Column type has the expected values.
- */
-  async verifyColumns(columnType, data) {
-    // verify column block is visible
-    await expect(await this.column).toBeVisible();
-
-    // verify rows and columns count
-    await expect(await this.rows).toHaveCount(data.rows);
-    await expect(await this.columns).toHaveCount(data.columns);
-
-    // verify columns text
-    await expect(await this.columns.nth(0)).toContainText(data.col0);
-    await expect(await this.columns.nth(1)).toContainText(data.col1);
-
-    // verify the css of columns row
-    if (!columnType.includes('table')) {
-      expect(await WebUtil.verifyCSS(
-        await this.rows.nth(0),
-        this.cssProperties['.columns > .row'],
-      )).toBeTruthy();
-    }
-
-    switch (columnType) {
-      case 'columns':
-        // verify the attributes of columns type block
-        expect(await WebUtil.verifyAttributes(
-          await this.column,
-          this.attProperties.columns,
-        )).toBeTruthy();
-        // verify third column content
-        await expect(await this.columns.nth(2)).toContainText(data.col2);
-        return true;
-
-      case 'columns(contained)':
-        // verify the attributes of columns type block
-        expect(await WebUtil.verifyAttributes(
-          await this.column,
-          this.attProperties['columns-contained'],
-        )).toBeTruthy();
-
-        // verify the css of columns row
-        expect(await WebUtil.verifyCSS(
-          await this.column.nth(0),
-          this.cssProperties['.columns.contained'],
-        )).toBeTruthy();
-
-        return true;
-
-      case 'columns(contained,middle)':
-        // verify the attributes of columns type block
-        expect(await WebUtil.verifyAttributes(
-          await this.column,
-          this.attProperties['columns-contained-middle'],
-        )).toBeTruthy();
-
-        // verify the css of columns row
-        expect(await WebUtil.verifyCSS(
-          await this.column.nth(0),
-          this.cssProperties['.columns.contained'],
-        )).toBeTruthy();
-        return true;
-
-      case 'columns(table)':
-        // verify the attributes of columns type block
-        expect(await WebUtil.verifyAttributes(
-          await this.column,
-          this.attProperties['columns-table'],
-        )).toBeTruthy();
-
-        // verify the css of columns first row
-        expect(await WebUtil.verifyCSS(
-          await this.rows.nth(0),
-          this.cssProperties['.columns.table > .row:first-child'],
-        )).toBeTruthy();
-
-        expect(await WebUtil.verifyCSS(
-          await this.rows.nth(1),
-          this.cssProperties['.columns.table > .row'],
-        )).toBeTruthy();
-
-        // verify columns text
-        await expect(await this.columns.nth(2)).toContainText(data.col2);
-        await expect(await this.columns.nth(3)).toContainText(data.col3);
-
-        return true;
-
-      case 'columns(contained,table)':
-        // verify the attributes of columns type block
-        expect(await WebUtil.verifyAttributes(
-          await this.column,
-          this.attProperties['columns-contained-table'],
-        )).toBeTruthy();
-
-        // verify the css of columns first row
-        expect(await WebUtil.verifyCSS(
-          await this.rows.nth(0),
-          this.cssProperties['.columns.table > .row:first-child'],
-        )).toBeTruthy();
-
-        expect(await WebUtil.verifyCSS(
-          await this.rows.nth(1),
-          this.cssProperties['.columns.table > .row'],
-        )).toBeTruthy();
-
-        // verify columns text
-        await expect(await this.columns.nth(2)).toContainText(data.col2);
-        await expect(await this.columns.nth(3)).toContainText(data.col3);
-
-        return true;
-      default:
-        throw new Error(`Unsupported Text type: ${this.columnsType}`);
-    }
-  }
 }
diff --git a/selectors/milo/howto.block.page.js b/selectors/milo/howto.block.page.js
index 5c6fdfd4..310bd2a9 100644
--- a/selectors/milo/howto.block.page.js
+++ b/selectors/milo/howto.block.page.js
@@ -1,18 +1,15 @@
-import { expect } from '@playwright/test';
-import { WebUtil } from '../../libs/webutil.js';
-
 export default class HowTo {
-  constructor(page) {
+  constructor(page, nth = 0) {
     this.page = page;
     // how-to  locators
-    this.howTo = page.locator('.how-to');
-    this.howToForeground = this.howTo.locator('.foreground');
-    this.howToLarge = this.page.locator('.how-to.large-image');
-    this.howToSeo = this.page.locator('.how-to.seo');
-    this.howToHeading = this.howTo.locator('.how-to-heading');
-    this.howToImage = this.howTo.locator('.how-to-image');
-    this.howToList = this.howTo.locator('li');
-    this.howToLargeImage = page.locator('.how-to-image img');
+    this.howTo = page.locator('.how-to').nth(nth);
+    this.foreground = this.howTo.locator('.foreground');
+    this.howToLarge = this.page.locator('.how-to.large-image').nth(nth);
+    this.howToSeo = this.page.locator('.how-to.seo').nth(nth);
+    this.heading = this.howTo.locator('.how-to-heading');
+    this.image = this.howTo.locator('.how-to-image');
+    this.list = this.howTo.locator('li');
+    this.largeImage = page.locator('.how-to-image img');
 
     // howto contents css
     this.cssProperties = {
@@ -50,48 +47,6 @@ export default class HowTo {
         'width': '600',
         'height': '300',
       },
-
     };
   }
-
-  /**
- * Verifies the css, attributes, styles, of elements or sections of the specified HowTo block.
- *
- * @param {string} howToType - The type of the HowTo to verify.
- * Possible values are 'how-to', 'how-to (large-image)', and 'how-to (seo)'.
- * @param {Integer} howToListCount - Howto block list count (ex: 3, 4, 5 etc..).
- * @returns {Promise<boolean>} - Returns true if the specified HowTo type has the expected values.
- */
-  async verifyHowTo(howToType, howToListCount) {
-    switch (howToType) {
-      case 'how-to':
-        // verify howto visibility and css values
-        await expect(this.howTo).toBeVisible();
-        expect(await WebUtil.verifyCSS(this.howToForeground, this.cssProperties['.how-to .foreground'])).toBeTruthy();
-        expect(await WebUtil.verifyCSS(this.howToHeading, this.cssProperties['body-m'])).toBeTruthy();
-        expect(await WebUtil.verifyCSS(this.howToImage, this.cssProperties['how-to-image'])).toBeTruthy();
-        // verify howto list count
-        await expect(await this.howToList).toHaveCount(howToListCount);
-        return true;
-      case 'how-to (large)':
-        // verify howto large visibility and css values
-        await expect(this.howToLarge).toBeVisible();
-        expect(await WebUtil.verifyCSS(this.howToHeading, this.cssProperties['body-m'])).toBeTruthy();
-        expect(await WebUtil.verifyCSS(this.howToLarge, this.cssProperties['how-to-large-image'])).toBeTruthy();
-        expect(await WebUtil.verifyAttributes(await this.howToLargeImage, this.attProperties['how-to-large-image'])).toBeTruthy();
-        // verify howto list count
-        await expect(await this.howToList).toHaveCount(howToListCount);
-        return true;
-      case 'how-to (seo)':
-        // verify howto seo visibility and css values
-        await expect(this.howToSeo).toBeVisible();
-        expect(await WebUtil.verifyCSS(this.howToHeading, this.cssProperties['body-m'])).toBeTruthy();
-        expect(await WebUtil.verifyCSS(this.howToSeo, this.cssProperties['how-to-seo'])).toBeTruthy();
-        // verify howto list count
-        await expect(await this.howToList).toHaveCount(howToListCount);
-        return true;
-      default:
-        throw new Error(`Unsupported howto type: ${this.howToList}`);
-    }
-  }
 };
diff --git a/selectors/milo/quote.block.page.js b/selectors/milo/quote.block.page.js
index c47204ad..ed65fd36 100644
--- a/selectors/milo/quote.block.page.js
+++ b/selectors/milo/quote.block.page.js
@@ -1,11 +1,8 @@
-import { expect } from '@playwright/test';
-import { WebUtil } from '../../libs/webutil.js';
-
 export default class Quote {
-  constructor(page) {
+  constructor(page, nth = 0) {
     this.page = page;
     // quote  locators
-    this.quote = this.page.locator('.quote');
+    this.quote = this.page.locator('.quote').nth(nth);
     this.quoteImage = this.quote.locator('.quote-image');
     this.quoteCopy = this.quote.locator('p.quote-copy');
     this.quoteFigCaption = this.quote.locator('p.figcaption');
@@ -62,115 +59,6 @@ export default class Quote {
       'quote-align-right': { 'class': 'quote contained align-right con-block' },
       'quote-xl-spacing': { 'class': 'quote contained xl-spacing con-block' },
       'section-dark': { 'style': 'background: rgb(102, 102, 102);' },
-
     };
   }
-
-  /**
- * Verifies the visibility, css, attributes, styles, of elements or sections of
- * the specified Quote block.
- *
- * @param {string} quoteType - The type of the Quote block to verify.
- * Possible values are 'quote', 'quote (contained)', 'quote (inline)'.
- * quote (borders), quote (align-right), and quote (xl-spaced)
- * @returns {Promise<boolean>} - Returns true if the specified Quote type has the expected values.
- */
-  async verifyQuote(quoteType, data) {
-    await expect(await this.quote).toBeVisible();
-
-    switch (quoteType) {
-      case 'quote':
-        // verify quote block image visibility, attributes, css and different contents
-        await expect(await this.quoteImage).toBeVisible();
-        expect(await WebUtil.verifyAttributes(
-          await this.quote,
-          this.attProperties.quote,
-        )).toBeTruthy();
-        expect(await WebUtil.verifyCSS(await this.quote, this.cssProperties.quote)).toBeTruthy();
-        await expect(await this.quoteCopy).toContainText(data.quoteCopy);
-        await expect(await this.quoteFigCaption).toContainText(data.figCaption);
-        await expect(await this.quoteFigCaptionCite).toContainText(data.cite);
-
-        return true;
-      case 'quote (contained)':
-        // verify quote (contained) block image visibility, attributes, css and different contents
-        await expect(await this.quoteImage).toBeVisible();
-        expect(await WebUtil.verifyAttributes(
-          await this.quote,
-          this.attProperties['quote-contained'],
-        )).toBeTruthy();
-        expect(await WebUtil.verifyCSS(await this.quote, this.cssProperties['quote-contained'])).toBeTruthy();
-        await expect(await this.quoteCopy).toContainText(data.quoteCopy);
-        await expect(await this.quoteFigCaption).toContainText(data.figCaption);
-        await expect(await this.quoteFigCaptionCite).toContainText(data.cite);
-
-        return true;
-
-      case 'quote (inline)':
-        // verify quote (inline) block image visibility, attributes, css and different contents
-        await expect(await this.quoteImage).toBeVisible();
-        expect(await WebUtil.verifyAttributes(
-          await this.quote,
-          this.attProperties['quote-inline'],
-        )).toBeTruthy();
-        expect(await WebUtil.verifyCSS(await this.quote, this.cssProperties.quote)).toBeTruthy();
-        expect(await WebUtil.verifyCSS(await this.quoteImage, this.cssProperties['quote-inline-figure'])).toBeTruthy();
-        await expect(await this.quoteCopy).toContainText(data.quoteCopy);
-        await expect(await this.quoteFigCaption).toContainText(data.figCaption);
-        await expect(await this.quoteFigCaptionCite).toContainText(data.cite);
-
-        return true;
-
-      case 'quote (borders)':
-        // verify quote (borders) block image not visibility, attributes, css and different contents
-        await expect(await this.quoteImage).not.toBeVisible();
-        expect(await WebUtil.verifyAttributes(
-          await this.quote,
-          this.attProperties['quote-borders'],
-        )).toBeTruthy();
-        expect(await WebUtil.verifyCSS(await this.quote, this.cssProperties.quote)).toBeTruthy();
-        await expect(await this.quoteCopy).toContainText(data.quoteCopy);
-        await expect(await this.quoteFigCaption).toContainText(data.figCaption);
-        await expect(await this.quoteFigCaptionCite).toContainText(data.cite);
-
-        return true;
-
-      case 'quote (align-right)':
-        // verify quote (align-right) block image visibility, attributes, css and different content
-        await expect(await this.quoteImage).toBeVisible();
-        expect(await WebUtil.verifyAttributes(
-          await this.quote,
-          this.attProperties['quote-align-right'],
-        )).toBeTruthy();
-        expect(await WebUtil.verifyCSS(await this.quote, this.cssProperties['quote-align-right'])).toBeTruthy();
-        await expect(await this.quoteCopy).toContainText(data.quoteCopy);
-        await expect(await this.quoteFigCaption).toContainText(data.figCaption);
-        await expect(await this.quoteFigCaptionCite).toContainText(data.cite);
-
-        return true;
-
-      case 'quote (xl-spaced)':
-        // verify quote (xl-spaced) block image visibility, attributes, css and different content
-        await expect(await this.sectionDark).toBeVisible();
-        expect(await WebUtil.verifyAttributes(
-          await this.sectionDark,
-          this.attProperties['section-dark'],
-        )).toBeTruthy();
-
-        await expect(await this.quoteImage).not.toBeVisible();
-        expect(await WebUtil.verifyAttributes(
-          await this.quote,
-          this.attProperties['quote-xl-spacing'],
-        )).toBeTruthy();
-
-        expect(await WebUtil.verifyCSS(await this.quote, this.cssProperties.quote)).toBeTruthy();
-        await expect(await this.quoteCopy).toContainText(data.quoteCopy);
-        await expect(await this.quoteFigCaption).toContainText(data.figCaption);
-        await expect(await this.quoteFigCaptionCite).toContainText(data.cite);
-
-        return true;
-      default:
-        throw new Error(`Unsupported Text type: ${this.quoteType}`);
-    }
-  }
 }
diff --git a/selectors/milo/zpattern.block.page.js b/selectors/milo/zpattern.block.page.js
index 2ade4ea4..372de7c5 100644
--- a/selectors/milo/zpattern.block.page.js
+++ b/selectors/milo/zpattern.block.page.js
@@ -1,100 +1,20 @@
-import { expect } from '@playwright/test';
-import { WebUtil } from '../../libs/webutil.js';
-
 export default class ZPattern {
-  constructor(page) {
+  constructor(page, nth = 0) {
     this.page = page;
     // z-pattern  locators
-    this.zPattern = page.locator('.z-pattern').first();
+    this.zPattern = page.locator('.z-pattern').nth(nth);
 
     // zpatter header
     this.zPatternHeader = this.zPattern.locator('.heading-row');
+    this.zPatternPText = this.zPatternHeader.locator('p');
+
     this.smallIntroHeadingText = this.zPattern.locator('#small-default-intro-text-optional');
     this.mediumIntroHeadingText = this.zPattern.locator('#medium-intro-text-optional');
     this.largeIntroHeadingText = this.zPattern.locator('#large-intro-text-optional');
     this.darkIntroHeadingText = this.zPattern.locator('#intuitive-block-authoring');
 
     this.zPatternMediaBlocks = this.zPattern.locator('.media');
-
-    // zpattern contents css
-    this.cssProperties = {
-      'media': {
-        'margin': /^0px(.*)/,
-        'position': 'relative',
-      },
-      'media-large-dark': {
-        'margin': /^0px(.*)/,
-        'position': 'relative',
-      },
-      'heading-xl': {
-        'font-size': '36px',
-        'line-height': '45px',
-      },
-      'heading-l': {
-        'font-size': '28px',
-        'line-height': '35px',
-      },
-      'heading-m': {
-        'font-size': '24px',
-        'line-height': '30px',
-      },
-      'heading-xs': {
-        'font-size': '18px',
-        'line-height': '22.5px',
-      },
-      'detail-l': {
-        'font-size': '16px',
-        'line-height': '20px',
-      },
-      'detail-m': {
-        'font-size': '12px',
-        'line-height': '15px',
-      },
-      'body-m': {
-        'font-size': '18px',
-        'line-height': '27px',
-      },
-      'body-s': {
-        'font-size': '16px',
-        'line-height': '24px',
-      },
-      'outline-button': {
-        'border': '2px solid rgb(44, 44, 44)',
-        'color': 'rgb(44, 44, 44)',
-        'border-radius': '16px',
-        'display': 'block',
-        'padding': '5px 14px',
-        'font-size': '15px',
-        'line-height': '16px',
-        'font-style': 'normal',
-        'font-weight': '700',
-      },
-      'con-button-blue': {
-        'border': '2px solid rgb(20, 115, 230)',
-        'color': 'rgb(255, 255, 255)',
-        'background': /^rgb\(20,\s*115,\s*230\)(.*)/,
-        'border-radius': '16px',
-        'display': 'block',
-        'padding': '5px 14px',
-        'font-size': '15px',
-        'line-height': '16px',
-        'font-style': 'normal',
-        'font-weight': '700',
-      },
-      'body-text': {
-        'border': '0px none rgb(44, 44, 44)',
-        'color': 'rgb(44, 44, 44)',
-        'background': /^rgba\(0,\s*0,\s*0,\s*0\)(.*)/,
-        'border-radius': '0px',
-        'display': 'block',
-        'padding': '0px',
-        'font-size': '16px',
-        'line-height': '24px',
-        'font-style': 'normal',
-        'font-weight': '400',
-      },
-
-    };
+    this.mediaBlocks = this.zPattern.locator('.media');     
 
     // zpattern contents attributes
     this.attProperties = {
@@ -126,130 +46,5 @@ export default class ZPattern {
 
     };
   }
-
-  /**
- * Verifies the css, attributes & styles, of elements  of the specified Z Pattern block.
- *
- * @param {string} howToType - The type of the Z Pattern to verify.
- * Possible values are 'zpattern', z-pattern (small), z-pattern (large) and z-pattern (dark)
- * @returns {Promise<boolean>} - Returns true if the specified Z Pattern type has the expected values.
- */
-  async verifyZPattern(zPatternType) {
-    const mediaBlocks = await this.zPatternMediaBlocks.all();
-    const mediaBlocksArray = await Promise.all(mediaBlocks.map(async (block) => block));
-
-    switch (zPatternType) {
-      case 'z-pattern':
-        // verify z-pattern style background
-        expect(await WebUtil.verifyAttributes(this.zPattern, this.attProperties['z-pattern'])).toBeTruthy();
-
-        // verify Z pattern intro text css and attributes
-        expect(await WebUtil.verifyCSS(this.mediumIntroHeadingText, this.cssProperties['heading-l'])).toBeTruthy();
-        expect(await WebUtil.verifyAttributes(this.mediumIntroHeadingText, this.attProperties['medium-intro-text-optional'])).toBeTruthy();
-
-        // verify Z pattern elements css and attributes
-        for (const mediaBlock of mediaBlocksArray) {
-          const classAttribute = await mediaBlock.getAttribute('class');
-          const hasReversedClass = classAttribute.includes('media-reversed');
-          if (hasReversedClass) {
-            expect(await WebUtil.verifyAttributes(mediaBlock, this.attProperties['medium-media-reversed'])).toBeTruthy();
-          }
-
-          const detailText = await mediaBlock.locator('.detail-m');
-          const headerText = await mediaBlock.locator('.heading-m');
-          const bodyText = await mediaBlock.locator('.body-s').nth(0);
-          const blueButton = await mediaBlock.locator('.blue').nth(0);
-          const image = await mediaBlock.locator('.image img').nth(0);
-          expect(await WebUtil.verifyCSS(detailText, this.cssProperties['detail-m'])).toBeTruthy();
-          expect(await WebUtil.verifyCSS(headerText, this.cssProperties['heading-m'])).toBeTruthy();
-          expect(await WebUtil.verifyCSS(bodyText, this.cssProperties['body-s'])).toBeTruthy();
-          expect(await WebUtil.verifyCSS(blueButton, this.cssProperties['con-button-blue'])).toBeTruthy();
-
-          expect(await WebUtil.verifyAttributes(image, this.attProperties['media-image'])).toBeTruthy();
-        }
-        return true;
-
-      case 'z-pattern (small)':
-        // verify Z pattern (small)  intro text css and attributes
-        expect(await WebUtil.verifyCSS(this.smallIntroHeadingText, this.cssProperties['heading-l'])).toBeTruthy();
-        expect(await WebUtil.verifyAttributes(this.smallIntroHeadingText, this.attProperties['small-default-intro-text-optional'])).toBeTruthy();
-
-        // verify Z pattern (small) elements css and attributes
-        for (const mediaBlock of mediaBlocksArray) {
-          const classAttribute = await mediaBlock.getAttribute('class');
-          const hasReversedClass = classAttribute.includes('media-reversed');
-          if (hasReversedClass) {
-            expect(await WebUtil.verifyAttributes(mediaBlock, this.attProperties['small-media-reversed'])).toBeTruthy();
-          }
-          const detailText = await mediaBlock.locator('.detail-m');
-          const headerText = await mediaBlock.locator('.heading-xs');
-          const bodyText = await mediaBlock.locator('.body-s').nth(0);
-          const blueButton = await mediaBlock.locator('.blue').nth(0);
-          const image = await mediaBlock.locator('.image img').nth(0);
-          expect(await WebUtil.verifyCSS(detailText, this.cssProperties['detail-m'])).toBeTruthy();
-          expect(await WebUtil.verifyCSS(headerText, this.cssProperties['heading-xs'])).toBeTruthy();
-          expect(await WebUtil.verifyCSS(bodyText, this.cssProperties['body-s'])).toBeTruthy();
-          expect(await WebUtil.verifyCSS(blueButton, this.cssProperties['con-button-blue'])).toBeTruthy();
-
-          expect(await WebUtil.verifyAttributes(image, this.attProperties['media-image'])).toBeTruthy();
-        }
-        return true;
-
-      case 'z-pattern (large)':
-
-        // verify Z pattern (large) intro text css and attributes
-        expect(await WebUtil.verifyCSS(this.largeIntroHeadingText, this.cssProperties['heading-xl'])).toBeTruthy();
-        expect(await WebUtil.verifyAttributes(this.largeIntroHeadingText, this.attProperties['large-intro-text-optional'])).toBeTruthy();
-
-        // verify Z pattern (large) elements css and attributes
-        for (const mediaBlock of mediaBlocksArray) {
-          const classAttribute = await mediaBlock.getAttribute('class');
-          const hasReversedClass = classAttribute.includes('media-reversed');
-          if (hasReversedClass) {
-            expect(await WebUtil.verifyAttributes(mediaBlock, this.attProperties['large-media-reversed'])).toBeTruthy();
-          }
-          const detailText = await mediaBlock.locator('.detail-l');
-          const headerText = await mediaBlock.locator('.heading-xl');
-          const bodyText = await mediaBlock.locator('.body-m').nth(0);
-          const blueButton = await mediaBlock.locator('.blue').nth(0);
-          const image = await mediaBlock.locator('.image img').nth(0);
-          expect(await WebUtil.verifyCSS(detailText, this.cssProperties['detail-l'])).toBeTruthy();
-          expect(await WebUtil.verifyCSS(headerText, this.cssProperties['heading-xl'])).toBeTruthy();
-          expect(await WebUtil.verifyCSS(bodyText, this.cssProperties['body-m'])).toBeTruthy();
-          expect(await WebUtil.verifyCSS(blueButton, this.cssProperties['con-button-blue'])).toBeTruthy();
-          expect(await WebUtil.verifyAttributes(image, this.attProperties['media-image'])).toBeTruthy();
-        }
-        return true;
-
-      case 'z-pattern (dark)':
-        // verify z-pattern (dark) style background
-        expect(await WebUtil.verifyAttributes(this.zPattern, this.attProperties['z-pattern-dark'])).toBeTruthy();
-
-        // verify Z pattern (dark) intro text css and attributes
-        expect(await WebUtil.verifyCSS(this.darkIntroHeadingText, this.cssProperties['heading-l'])).toBeTruthy();
-        expect(await WebUtil.verifyAttributes(this.darkIntroHeadingText, this.attProperties['dark-intro-text-optional'])).toBeTruthy();
-
-        // verify Z pattern (dark) elements css and attributes
-        for (const mediaBlock of mediaBlocksArray) {
-          const classAttribute = await mediaBlock.getAttribute('class');
-          const hasReversedClass = classAttribute.includes('media-reversed');
-          if (hasReversedClass) {
-            expect(await WebUtil.verifyAttributes(mediaBlock, this.attProperties['medium-media-reverse-mobile'])).toBeTruthy();
-          }
-          const detailText = await mediaBlock.locator('.detail-m');
-          const headerText = await mediaBlock.locator('.heading-m');
-          const bodyText = await mediaBlock.locator('.body-s').nth(0);
-          const blueButton = await mediaBlock.locator('.blue').nth(0);
-          const image = await mediaBlock.locator('.image img').nth(0);
-          expect(await WebUtil.verifyCSS(detailText, this.cssProperties['detail-m'])).toBeTruthy();
-          expect(await WebUtil.verifyCSS(headerText, this.cssProperties['heading-m'])).toBeTruthy();
-          expect(await WebUtil.verifyCSS(bodyText, this.cssProperties['body-s'])).toBeTruthy();
-          expect(await WebUtil.verifyCSS(blueButton, this.cssProperties['con-button-blue'])).toBeTruthy();
-          expect(await WebUtil.verifyAttributes(image, this.attProperties['media-image'])).toBeTruthy();
-        }
-        return true;
-      default:
-        throw new Error(`Unsupported Z Pattern type: ${this.zPatternType}`);
-    }
-  }
 };
+
diff --git a/tests/milo/columns.block.test.js b/tests/milo/columns.block.test.js
index 6557fa8b..6e6d035c 100644
--- a/tests/milo/columns.block.test.js
+++ b/tests/milo/columns.block.test.js
@@ -1,17 +1,22 @@
 /* eslint-disable import/named */
 import { expect, test } from '@playwright/test';
+import { WebUtil } from '../../libs/webutil.js';
 import { features } from '../../features/milo/columns.block.spec.js';
 import ColumnsBlock from '../../selectors/milo/columns.block.page.js';
 
 let column;
+let webUtil;
 
 test.describe('Milo Columns Block test suite', () => {
   test.beforeEach(async ({ page }) => {
     column = new ColumnsBlock(page);
+    webUtil = new WebUtil(page);
   });
 
+  // Test 0 : Column default block
   test(`${features[0].name},${features[0].tags}`, async ({ page, baseURL }) => {
     console.info(`[Test Page]: ${baseURL}${features[0].path}`);
+    const { data } = features[0];
 
     await test.step('step-1: Go to Columns block test page', async () => {
       await page.goto(`${baseURL}${features[0].path}`);
@@ -20,13 +25,26 @@ test.describe('Milo Columns Block test suite', () => {
     });
 
     await test.step('step-2: Verify Columns block content/specs', async () => {
-      const { data } = features[0];
-      expect(await column.verifyColumns('columns', data)).toBeTruthy();
+      // verify colums visibility, rows count, columns count and text content
+      await expect(await column.column).toBeVisible();      
+
+      await expect(await column.rows).toHaveCount(data.rows);
+      await expect(await column.columns).toHaveCount(data.columns);
+
+      await expect(await column.columns.nth(0)).toContainText(data.col0);
+      await expect(await column.columns.nth(1)).toContainText(data.col1);
+      await expect(await column.columns.nth(2)).toContainText(data.col2);
+      
+      // verify the css and attributes
+      expect(await webUtil.verifyCSS_(await column.rows.nth(0), column.cssProperties['.columns > .row'])).toBeTruthy();
+      expect(await webUtil.verifyAttributes_(await column.column, column.attProperties.columns)).toBeTruthy();
     });
   });
 
+  // Test 1 : Columns (contained) block  
   test(`${features[1].name},${features[1].tags}`, async ({ page, baseURL }) => {
     console.info(`[Test Page]: ${baseURL}${features[1].path}`);
+    const { data } = features[1];
 
     await test.step('step-1: Go to Columns block test page', async () => {
       await page.goto(`${baseURL}${features[1].path}`);
@@ -35,13 +53,25 @@ test.describe('Milo Columns Block test suite', () => {
     });
 
     await test.step('step-2: Verify Columns(contained) block content/specs', async () => {
-      const { data } = features[1];
-      expect(await column.verifyColumns('columns(contained)', data)).toBeTruthy();
+      // verify colums visibility, rows count, columns count and text content
+      await expect(await column.column).toBeVisible();      
+
+      await expect(await column.rows).toHaveCount(data.rows);
+      await expect(await column.columns).toHaveCount(data.columns);
+
+      await expect(await column.columns.nth(0)).toContainText(data.col0);
+      await expect(await column.columns.nth(1)).toContainText(data.col1);
+
+      // verify the css and attributes
+      expect(await webUtil.verifyCSS_(await column.column, column.cssProperties['.columns.contained'])).toBeTruthy();
+      expect(await webUtil.verifyAttributes_(await column.column, column.attProperties['columns-contained'])).toBeTruthy();
     });
   });
 
+  // Test 2 : Columns (contained,middle) block    
   test(`${features[2].name},${features[2].tags}`, async ({ page, baseURL }) => {
     console.info(`[Test Page]: ${baseURL}${features[2].path}`);
+    const { data } = features[2];
 
     await test.step('step-1: Go to Columns block test page', async () => {
       await page.goto(`${baseURL}${features[2].path}`);
@@ -50,13 +80,25 @@ test.describe('Milo Columns Block test suite', () => {
     });
 
     await test.step('step-2: Verify Columns(contained,middle) block content/specs', async () => {
-      const { data } = features[2];
-      expect(await column.verifyColumns('columns(contained,middle)', data)).toBeTruthy();
+      // verify colums visibility, rows count, columns count and text content
+      await expect(await column.column).toBeVisible();      
+
+      await expect(await column.rows).toHaveCount(data.rows);
+      await expect(await column.columns).toHaveCount(data.columns);
+
+      await expect(await column.columns.nth(0)).toContainText(data.col0);
+      await expect(await column.columns.nth(1)).toContainText(data.col1); 
+      
+      // verify the css and attributes
+      expect(await webUtil.verifyCSS_(await column.column, column.cssProperties['.columns.contained'])).toBeTruthy();
+      expect(await webUtil.verifyAttributes_(await column.column, column.attProperties['columns-contained-middle'])).toBeTruthy();      
     });
   });
 
+  // Test 3 : Columns (table) block   
   test(`${features[3].name},${features[3].tags}`, async ({ page, baseURL }) => {
     console.info(`[Test Page]: ${baseURL}${features[3].path}`);
+    const { data } = features[3];
 
     await test.step('step-1: Go to Columns block test page', async () => {
       await page.goto(`${baseURL}${features[3].path}`);
@@ -65,13 +107,29 @@ test.describe('Milo Columns Block test suite', () => {
     });
 
     await test.step('step-2: Verify Columns(table) block content/specs', async () => {
-      const { data } = features[3];
-      expect(await column.verifyColumns('columns(table)', data)).toBeTruthy();
+      // verify colums visibility, rows count, columns count and text content
+      await expect(await column.column).toBeVisible();      
+
+      await expect(await column.rows).toHaveCount(data.rows);
+      await expect(await column.columns).toHaveCount(data.columns);
+
+      await expect(await column.columns.nth(0)).toContainText(data.col0);
+      await expect(await column.columns.nth(1)).toContainText(data.col1);
+      await expect(await column.columns.nth(2)).toContainText(data.col2);
+      await expect(await column.columns.nth(3)).toContainText(data.col3);
+      
+      // verify the css and attributes
+      expect(await webUtil.verifyCSS_(await column.rows.nth(0), column.cssProperties['.columns.table > .row:first-child'])).toBeTruthy();
+      expect(await webUtil.verifyCSS_(await column.rows.nth(1), column.cssProperties['.columns.table > .row'])).toBeTruthy();
+
+      expect(await webUtil.verifyAttributes_(await column.column, column.attProperties['columns-table'])).toBeTruthy();
     });
   });
 
+  // Test 4 : Columns (contained,table) block   
   test(`${features[4].name},${features[4].tags}`, async ({ page, baseURL }) => {
     console.info(`[Test Page]: ${baseURL}${features[4].path}`);
+    const { data } = features[4];
 
     await test.step('step-1: Go to Columns block test page', async () => {
       await page.goto(`${baseURL}${features[4].path}`);
@@ -80,8 +138,22 @@ test.describe('Milo Columns Block test suite', () => {
     });
 
     await test.step('step-2: Verify Columns(contained,table) block content/specs', async () => {
-      const { data } = features[4];
-      expect(await column.verifyColumns('columns(contained,table)', data)).toBeTruthy();
+      // verify colums visibility, rows count, columns count and text content
+      await expect(await column.column).toBeVisible();      
+
+      await expect(await column.rows).toHaveCount(data.rows);
+      await expect(await column.columns).toHaveCount(data.columns);
+
+      await expect(await column.columns.nth(0)).toContainText(data.col0);
+      await expect(await column.columns.nth(1)).toContainText(data.col1);
+      await expect(await column.columns.nth(2)).toContainText(data.col2);
+      await expect(await column.columns.nth(3)).toContainText(data.col3);
+      
+      // verify the css and attributes
+      expect(await webUtil.verifyCSS_(await column.rows.nth(0), column.cssProperties['.columns.table > .row:first-child'])).toBeTruthy();
+      expect(await webUtil.verifyCSS_(await column.rows.nth(1), column.cssProperties['.columns.table > .row'])).toBeTruthy();
+
+      expect(await webUtil.verifyAttributes_(await column.column, column.attProperties['columns-contained-table'])).toBeTruthy();
     });
   });
 });
diff --git a/tests/milo/howto.block.test.js b/tests/milo/howto.block.test.js
index 3e04efb4..4bf36f0f 100644
--- a/tests/milo/howto.block.test.js
+++ b/tests/milo/howto.block.test.js
@@ -12,6 +12,7 @@ test.describe('Milo HowTo block test suite', () => {
     howTo = new HowToBlock(page);
   });
 
+// Test 0 : HowTo default block  
   test(`${features[0].name},${features[0].tags}`, async ({ page, baseURL }) => {
     console.info(`[Test Page]: ${baseURL}${features[0].path}`);
 
@@ -22,10 +23,16 @@ test.describe('Milo HowTo block test suite', () => {
     });
 
     await test.step('step-2: Verify HowTo specs', async () => {
-      expect(await howTo.verifyHowTo('how-to', 4)).toBeTruthy();
+      await expect(howTo.howTo).toBeVisible();
+      await expect(await howTo.list).toHaveCount(4);
+
+      expect(await webUtil.verifyCSS_(howTo.foreground, howTo.cssProperties['.how-to .foreground'])).toBeTruthy();
+      expect(await webUtil.verifyCSS_(howTo.heading, howTo.cssProperties['body-m'])).toBeTruthy();
+      expect(await webUtil.verifyCSS_(howTo.image, howTo.cssProperties['how-to-image'])).toBeTruthy();
     });
   });
 
+// Test 1 : how-to (large) block    
   test(`${features[1].name},${features[1].tags}`, async ({ page, baseURL }) => {
     console.info(`[Test Page]: ${baseURL}${features[1].path}`);
 
@@ -36,10 +43,16 @@ test.describe('Milo HowTo block test suite', () => {
     });
 
     await test.step('step-2: Verify HowTo large specs', async () => {
-      expect(await howTo.verifyHowTo('how-to (large)', 4)).toBeTruthy();
+      await expect(howTo.howToLarge).toBeVisible();
+      await expect(await howTo.list).toHaveCount(4);
+
+      expect(await webUtil.verifyCSS_(howTo.heading, howTo.cssProperties['body-m'])).toBeTruthy();
+      expect(await webUtil.verifyCSS_(howTo.howToLarge, howTo.cssProperties['how-to-large-image'])).toBeTruthy();
+      expect(await webUtil.verifyAttributes_(await howTo.largeImage, howTo.attProperties['how-to-large-image'])).toBeTruthy();
     });
   });
 
+// Test 2 : how-to (seo) block   
   test(`${features[2].name},${features[2].tags}`, async ({ page, baseURL }) => {
     console.info(`[Test Page]: ${baseURL}${features[2].path}`);
 
@@ -50,7 +63,11 @@ test.describe('Milo HowTo block test suite', () => {
     });
 
     await test.step('step-2: Verify HowTo SEO specs', async () => {
-      expect(await howTo.verifyHowTo('how-to (seo)', 4)).toBeTruthy();
+      await expect(howTo.howToSeo).toBeVisible();
+      await expect(await howTo.list).toHaveCount(4);
+
+      expect(await webUtil.verifyCSS_(howTo.heading, howTo.cssProperties['body-m'])).toBeTruthy();
+      expect(await webUtil.verifyCSS_(howTo.howToSeo, howTo.cssProperties['how-to-seo'])).toBeTruthy();
     });
   });
 });
diff --git a/tests/milo/htmlextn.feature.test.js b/tests/milo/htmlextn.feature.test.js
index 9f641cac..1669d2e2 100644
--- a/tests/milo/htmlextn.feature.test.js
+++ b/tests/milo/htmlextn.feature.test.js
@@ -1,92 +1,48 @@
 import { expect, test } from '@playwright/test';
-import { WebUtil } from '../../libs/webutil.js';
-
-const parse = require('../../libs/parse.js');
-const htmlExtn = require('../../features/milo/htmlextn.spec.js');
-const selectors = require('../../selectors/milo/htmlextn.feature.page.js');
-
-// Parse the feature file into something flat that can be tested separately
-const { name, features } = parse(htmlExtn);
-
-let webUtil;
-
-test.describe(`${name} test suite`, () => {
-  test.beforeEach(async ({ page }) => {
-    webUtil = new WebUtil(page);
+import { features } from '../../features/milo/htmlextn.spec.js'
+
+const envList = require('../../envs/envs.js');
+
+test.describe('Milo Html Extension feature test suite', () => {
+
+  // Test 0 : Html Extension validation for bacom
+  test(`${features[0].name},${features[0].tags}`, async ({ page }) => {    
+    const paths = features[0].path;
+    const env = features[0].envs;
+    
+    await test.step('step-1: Go to test page urls and verify .html', async () => {
+      for (const path of paths) {
+        console.info('[Test Page]\n:', envList[env]+`${path}`);
+        const url = envList[env]+ path;
+        await page.goto(url);       
+
+        if (!page.url().match(/@blog/) && (page.url().match(/customer-success-stories/))) {
+          expect(page.url()).toContain('.html'); 
+        } else {          
+          await expect(page).toHaveURL(url);
+        }
+      }    
+    });
   });
 
-  features.forEach((props) => {
-    test(props.title, async ({ page, browserName }) => {
-      test.skip();
-      await page.goto(props.url);
-      await page.waitForLoadState('domcontentloaded');
-
-      if (!props.title.match(/@blog/) && (props.url.match(/customer-success-stories/))) {
-        expect(page.url()).toContain('.html');
-
-        /* Added scrolling for CaaS to load.
-        * Without it, test provides false count for validation checking.
-        * */
-        await webUtil.scrollPage('down', 'slow');
-        await webUtil.scrollPage('up', 'fast');
-
-        /* Check 
-        * CaaS fragments urls are not converted by verifying the cards render and are visible
-        * Issue with CaaS cards loading when using WebKit/Chromium browsers
-        * outside of internal network. Firefox works though. 
-        * */
-        if (browserName === 'firefox') {
-          const caasCards = page.locator(selectors['@caas_cards']);
-          await expect(caasCards).toBeVisible();
+  // Test 1 : Html Extension validation for blog
+  test(`${features[1].name},${features[1].tags}`, async ({ page }) => {    
+    const paths = features[1].path;
+    const env = features[1].envs;
+    
+    await test.step('step-1: Go to test page urls and verify .html', async () => {
+      for (const path of paths) {
+        console.info('[Test Page]\n:', envList[env]+`${path}`);
+        const url = envList[env]+ path;
+        await page.goto(url);
+
+        if (!page.url().match(/@blog/) && (page.url().match(/customer-success-stories/))) {
+          expect(page.url()).toContain('.html'); 
+        } else {          
+          await expect(page).toHaveURL(url);
         }
-      } else {
-        await expect(page).toHaveURL(props.url);
-      }
-
-      /* Check all links for:
-      * They have .html on them within the same domain, subdomain.
-      * Domains without a '/', like www.adobe.com shouldn't have .html added.
-      * They don't have .html on urls ending in '/'.
-      * Links with .html already on them shouldn't have .html added again. 
-      * */
-      if (!props.title.match(/@blog/)) {
-        const hrefs = await page.evaluate(async () => {
-          await new Promise(resolve => setTimeout(resolve, 2000));
-          return Array.from(document.links).map((item) => item.href);
-        });
-             
-        hrefs.forEach(async (linkUrl) => {          
-          if (!linkUrl.includes('/fragments/')) {
-            if (!linkUrl.match(/business.adobe.com\/blog|business.adobe.com\/.*\/blog/)) {
-              if (linkUrl.charAt(linkUrl.length - 1) === '/') {
-                expect(linkUrl).not.toContain('.html');
-              } else {
-                if (linkUrl.includes('business.adobe.com') && !linkUrl.includes('/blog/')) {
-                  expect(linkUrl).toContain('.html');
-                }
-                if (linkUrl.match(/business.adobe.com\/blog\/|business.adobe.com\/.*\/blog\//)) {
-                  expect(linkUrl).not.toContain('.html');
-                }
-                if (linkUrl.includes('.html')) {
-                  expect(linkUrl).not.toMatch(/.html.html/);
-                }
-                if (!linkUrl.includes('/')) {
-                  expect(linkUrl).not.toContain('.html');
-                }
-              }
-            }
-          }
-        });
-      }
-
-      if (props.title.match(/@blog/)) {
-        const link = page.getByRole('link', { name: selectors['@dif_subdomain_link'] });
-        expect(await link.getAttribute('href')).not.toContain('.html');
-        await link.click();
-        await page.waitForLoadState();
-        await expect(page).toHaveURL(/business.adobe.com\/blog/);
-        await page.getByRole('heading', { name: selectors['@dif_subdomain_heading'] }).first().waitFor();
-      }
+      }    
     });
   });
+  
 });
diff --git a/tests/milo/quote.block.test.js b/tests/milo/quote.block.test.js
index 6e3425ee..bcecd2a5 100644
--- a/tests/milo/quote.block.test.js
+++ b/tests/milo/quote.block.test.js
@@ -1,16 +1,21 @@
 import { expect, test } from '@playwright/test';
+import { WebUtil } from '../../libs/webutil.js';
 import { features } from '../../features/milo/quote.block.spec.js';
 import QuoteBlock from '../../selectors/milo/quote.block.page.js';
 
 let quote;
+let webUtil
 
 test.describe('Milo Quote Block test suite', () => {
   test.beforeEach(async ({ page }) => {
+    webUtil = new WebUtil(page);
     quote = new QuoteBlock(page);
   });
 
+  // Test 0 : Quote default block
   test(`${features[0].name},${features[0].tags}`, async ({ page, baseURL }) => {
     console.info(`[Test Page]: ${baseURL}${features[0].path}`);
+    const { data } = features[0];
 
     await test.step('step-1: Go to Quote block test page', async () => {
       await page.goto(`${baseURL}${features[0].path}`);
@@ -19,13 +24,21 @@ test.describe('Milo Quote Block test suite', () => {
     });
 
     await test.step('step-2: Verify Quote block content/specs', async () => {
-      const { data } = features[0];
-      expect(await quote.verifyQuote('quote', data)).toBeTruthy();
+      await expect(await quote.quoteImage).toBeVisible();
+      await expect(await quote.quoteCopy).toContainText(data.quoteCopy);
+      await expect(await quote.quoteFigCaption).toContainText(data.figCaption);
+      await expect(await quote.quoteFigCaptionCite).toContainText(data.cite);
+
+      expect(await webUtil.verifyAttributes_(await quote.quote, quote.attProperties.quote)).toBeTruthy();
+      expect(await webUtil.verifyCSS_(await quote.quote, quote.cssProperties.quote)).toBeTruthy();
+
     });
   });
 
+  // Test 1 : quote (contained)
   test(`${features[1].name},${features[1].tags}`, async ({ page, baseURL }) => {
     console.info(`[Test Page]: ${baseURL}${features[1].path}`);
+    const { data } = features[1];
 
     await test.step('step-1: Go to Quote block test page', async () => {
       await page.goto(`${baseURL}${features[1].path}`);
@@ -34,13 +47,20 @@ test.describe('Milo Quote Block test suite', () => {
     });
 
     await test.step('step-2: Verify Quote (contained) block content/specs', async () => {
-      const { data } = features[1];
-      expect(await quote.verifyQuote('quote (contained)', data)).toBeTruthy();
+      await expect(await quote.quoteImage).toBeVisible();
+      await expect(await quote.quoteCopy).toContainText(data.quoteCopy);
+      await expect(await quote.quoteFigCaption).toContainText(data.figCaption);
+      await expect(await quote.quoteFigCaptionCite).toContainText(data.cite);
+
+      expect(await webUtil.verifyAttributes_(await quote.quote, quote.attProperties['quote-contained'], )).toBeTruthy();
+      expect(await webUtil.verifyCSS_(await quote.quote, quote.cssProperties['quote-contained'])).toBeTruthy();      
     });
   });
 
+  // Test 2 : Quote (inline,contained)
   test(`${features[2].name},${features[2].tags}`, async ({ page, baseURL }) => {
     console.info(`[Test Page]: ${baseURL}${features[2].path}`);
+    const { data } = features[2];
 
     await test.step('step-1: Go to Quote (inline) block test page', async () => {
       await page.goto(`${baseURL}${features[2].path}`);
@@ -49,13 +69,21 @@ test.describe('Milo Quote Block test suite', () => {
     });
 
     await test.step('step-2: Verify Quote (inline) block content/specs', async () => {
-      const { data } = features[2];
-      expect(await quote.verifyQuote('quote (inline)', data)).toBeTruthy();
+      await expect(await quote.quoteImage).toBeVisible();
+      await expect(await quote.quoteCopy).toContainText(data.quoteCopy);
+      await expect(await quote.quoteFigCaption).toContainText(data.figCaption);
+      await expect(await quote.quoteFigCaptionCite).toContainText(data.cite);
+
+      expect(await webUtil.verifyAttributes_(await quote.quote, quote.attProperties['quote-inline'])).toBeTruthy();
+      expect(await webUtil.verifyCSS_(await quote.quote, quote.cssProperties.quote)).toBeTruthy();
+      expect(await webUtil.verifyCSS_(await quote.quoteImage, quote.cssProperties['quote-inline-figure'])).toBeTruthy();
     });
   });
 
+  // Test 3 : quote (borders)  
   test(`${features[3].name},${features[3].tags}`, async ({ page, baseURL }) => {
     console.info(`[MiloInfo] Checking page: ${baseURL}${features[3].path}`);
+    const { data } = features[3];
 
     await test.step('step-1: Go to Quote (borders) block test page', async () => {
       await page.goto(`${baseURL}${features[3].path}`);
@@ -64,13 +92,20 @@ test.describe('Milo Quote Block test suite', () => {
     });
 
     await test.step('step-2: Verify Quote (borders) block content/specs', async () => {
-      const { data } = features[3];
-      expect(await quote.verifyQuote('quote (borders)', data)).toBeTruthy();
+      await expect(await quote.quoteImage).not.toBeVisible();
+      await expect(await quote.quoteCopy).toContainText(data.quoteCopy);
+      await expect(await quote.quoteFigCaption).toContainText(data.figCaption);
+      await expect(await quote.quoteFigCaptionCite).toContainText(data.cite);
+
+      expect(await webUtil.verifyAttributes_(await quote.quote, quote.attProperties['quote-borders'])).toBeTruthy();
+      expect(await webUtil.verifyCSS_(await quote.quote, quote.cssProperties.quote)).toBeTruthy();
     });
   });
 
+  // Test 4 : quote (align-right) 
   test(`${features[4].name},${features[4].tags}`, async ({ page, baseURL }) => {
     console.info(`[Test Page]: ${baseURL}${features[4].path}`);
+    const { data } = features[4];
 
     await test.step('step-1: Go to Quote (align-right) block test page', async () => {
       await page.goto(`${baseURL}${features[4].path}`);
@@ -79,13 +114,20 @@ test.describe('Milo Quote Block test suite', () => {
     });
 
     await test.step('step-2: Verify Quote (align-right) block content/specs', async () => {
-      const { data } = features[4];
-      expect(await quote.verifyQuote('quote (align-right)', data)).toBeTruthy();
+      await expect(await quote.quoteImage).toBeVisible();
+      await expect(await quote.quoteCopy).toContainText(data.quoteCopy);
+      await expect(await quote.quoteFigCaption).toContainText(data.figCaption);
+      await expect(await quote.quoteFigCaptionCite).toContainText(data.cite);
+
+      expect(await webUtil.verifyAttributes_(await quote.quote, quote.attProperties['quote-align-right'])).toBeTruthy();
+      expect(await webUtil.verifyCSS_(await quote.quote, quote.cssProperties['quote-align-right'])).toBeTruthy();
     });
   });
 
+  // Test 5 : quote (xl-spaced)   
   test(`${features[5].name},${features[5].tags}`, async ({ page, baseURL }) => {
     console.info(`[Test Page]: ${baseURL}${features[5].path}`);
+    const { data } = features[5];
 
     await test.step('step-1: Go to Quote (xl-spaced) block test page', async () => {
       await page.goto(`${baseURL}${features[5].path}`);
@@ -94,8 +136,15 @@ test.describe('Milo Quote Block test suite', () => {
     });
 
     await test.step('step-2: Verify Quote (xl-spaced) block content/specs', async () => {
-      const { data } = features[5];
-      expect(await quote.verifyQuote('quote (xl-spaced)', data)).toBeTruthy();
+      await expect(await quote.sectionDark).toBeVisible();
+      await expect(await quote.quoteImage).not.toBeVisible();
+      await expect(await quote.quoteCopy).toContainText(data.quoteCopy);
+      await expect(await quote.quoteFigCaption).toContainText(data.figCaption);
+      await expect(await quote.quoteFigCaptionCite).toContainText(data.cite);
+
+      expect(await webUtil.verifyAttributes_(await quote.sectionDark, quote.attProperties['section-dark'])).toBeTruthy();
+      expect(await webUtil.verifyAttributes_(await quote.quote, quote.attProperties['quote-xl-spacing'])).toBeTruthy();
+      expect(await webUtil.verifyCSS_(await quote.quote, quote.cssProperties.quote)).toBeTruthy();
     });
   });
-});
+});
\ No newline at end of file
diff --git a/tests/milo/zpattern.block.test.js b/tests/milo/zpattern.block.test.js
index ca2b45d6..2930397e 100644
--- a/tests/milo/zpattern.block.test.js
+++ b/tests/milo/zpattern.block.test.js
@@ -1,16 +1,21 @@
 import { expect, test } from '@playwright/test';
+import { WebUtil } from '../../libs/webutil.js';
 import { features } from '../../features/milo/zpattern.block.spec.js';
 import ZPatternBlock from '../../selectors/milo/zpattern.block.page.js';
 
+let webUtil;
 let zpattern;
 
 test.describe('Milo Z Pattern Block test suite', () => {
   test.beforeEach(async ({ page }) => {
+    webUtil = new WebUtil(page);
     zpattern = new ZPatternBlock(page);
   });
 
+// Test 0 : ZPattern default block  
   test(`${features[0].name},${features[0].tags}`, async ({ page, baseURL }) => {
     console.info(`[Test Page]: ${baseURL}${features[0].path}`);
+    const { data } = features[0];
 
     await test.step('step-1: Go to Z Pattern block test page', async () => {
       await page.goto(`${baseURL}${features[0].path}`);
@@ -19,12 +24,37 @@ test.describe('Milo Z Pattern Block test suite', () => {
     });
 
     await test.step('step-2: Verify Z Pattern block specs', async () => {
-      expect(await zpattern.verifyZPattern('z-pattern')).toBeTruthy();
-    });
+      await expect(await zpattern.zPatternHeader).toContainText(data.headingText);
+      await expect(await zpattern.zPatternPText).toContainText(data.introText);      
+      await expect(await zpattern.mediaBlocks).toHaveCount(data.mediaBlockCount);
+
+      const mediaBlocks = await zpattern.mediaBlocks.all();
+      const mediaBlocksArray = await Promise.all(mediaBlocks.map(async (block) => block));
+      
+      for (let i = 0; i < mediaBlocksArray.length; i++) {
+        const mediaBlock = mediaBlocksArray[i];
+        await expect(await mediaBlock.locator('.detail-m')).toContainText(data.mediaBlocks[i]['detailText']);
+        await expect(await mediaBlock.locator('.heading-m')).toContainText(data.mediaBlocks[i]['h2Text']);
+        await expect(await mediaBlock.locator('.body-s').nth(0)).toContainText(data.mediaBlocks[i]['bodyText']);
+        await expect(await mediaBlock.locator('.blue')).toContainText(data.mediaBlocks[i]['blueButtonText']);
+
+        const image = await mediaBlock.locator('.image img').nth(0);
+        const classAttribute = await mediaBlock.getAttribute('class');
+        const hasReversedClass = classAttribute.includes('media-reversed');
+
+        if (hasReversedClass) {
+          expect(await webUtil.verifyAttributes_(mediaBlock, zpattern.attProperties['medium-media-reversed'])).toBeTruthy();
+        }
+        expect(await webUtil.verifyAttributes_(image, zpattern.attProperties['media-image'])).toBeTruthy();                
+      }
+
+    });    
   });
 
+  // Test 1 :ZPattern (small) block   
   test(`${features[1].name},${features[1].tags}`, async ({ page, baseURL }) => {
     console.info(`[Test Page]: ${baseURL}${features[1].path}`);
+    const { data } = features[1];
 
     await test.step('step-1: Go to z-pattern (small) block test page', async () => {
       await page.goto(`${baseURL}${features[1].path}`);
@@ -33,12 +63,37 @@ test.describe('Milo Z Pattern Block test suite', () => {
     });
 
     await test.step('step-2: Verify z-pattern (small) block specs', async () => {
-      expect(await zpattern.verifyZPattern('z-pattern (small)')).toBeTruthy();
+      await expect(await zpattern.zPatternHeader).toContainText(data.headingText);
+      await expect(await zpattern.zPatternPText).toContainText(data.introText);      
+      await expect(await zpattern.mediaBlocks).toHaveCount(data.mediaBlockCount);
+
+      const mediaBlocks = await zpattern.mediaBlocks.all();
+      const mediaBlocksArray = await Promise.all(mediaBlocks.map(async (block) => block));
+      
+      for (let i = 0; i < mediaBlocksArray.length; i++) {
+        const mediaBlock = mediaBlocksArray[i];
+        await expect(await mediaBlock.locator('.detail-m')).toContainText(data.mediaBlocks[i]['detailText']);
+        await expect(await mediaBlock.locator('.heading-xs')).toContainText(data.mediaBlocks[i]['h2Text']);
+        await expect(await mediaBlock.locator('.body-s').nth(0)).toContainText(data.mediaBlocks[i]['bodyText']);
+        await expect(await mediaBlock.locator('.blue')).toContainText(data.mediaBlocks[i]['blueButtonText']);
+
+        const image = await mediaBlock.locator('.image img').nth(0);
+        const classAttribute = await mediaBlock.getAttribute('class');
+        const hasReversedClass = classAttribute.includes('media-reversed');
+
+        if (hasReversedClass) {
+          expect(await webUtil.verifyAttributes_(mediaBlock, zpattern.attProperties['small-media-reversed'])).toBeTruthy();
+        }
+        expect(await webUtil.verifyAttributes_(image, zpattern.attProperties['media-image'])).toBeTruthy();                
+      }
+
     });
   });
 
+  // Test 2 :Zpattern (large) block 
   test(`${features[2].name},${features[2].tags}`, async ({ page, baseURL }) => {
     console.info(`[Test Page]: ${baseURL}${features[2].path}`);
+    const { data } = features[2];
 
     await test.step('step-1: Go to z-pattern (large) block test page', async () => {
       await page.goto(`${baseURL}${features[2].path}`);
@@ -47,12 +102,37 @@ test.describe('Milo Z Pattern Block test suite', () => {
     });
 
     await test.step('step-2: Verify z-pattern (large) block specs', async () => {
-      expect(await zpattern.verifyZPattern('z-pattern (large)')).toBeTruthy();
-    });
-  });
+      await expect(await zpattern.zPatternHeader).toContainText(data.headingText);
+      await expect(await zpattern.zPatternPText).toContainText(data.introText);      
+      await expect(await zpattern.mediaBlocks).toHaveCount(data.mediaBlockCount);
+
+      const mediaBlocks = await zpattern.mediaBlocks.all();
+      const mediaBlocksArray = await Promise.all(mediaBlocks.map(async (block) => block));
+      
+      for (let i = 0; i < mediaBlocksArray.length; i++) {
+        const mediaBlock = mediaBlocksArray[i];
+        await expect(await mediaBlock.locator('.detail-l')).toContainText(data.mediaBlocks[i]['detailText']);
+        await expect(await mediaBlock.locator('.heading-xl')).toContainText(data.mediaBlocks[i]['h2Text']);
+        await expect(await mediaBlock.locator('.body-m').nth(0)).toContainText(data.mediaBlocks[i]['bodyText']);
+        await expect(await mediaBlock.locator('.blue')).toContainText(data.mediaBlocks[i]['blueButtonText']);
+
+        const image = await mediaBlock.locator('.image img').nth(0);
+        const classAttribute = await mediaBlock.getAttribute('class');
+        const hasReversedClass = classAttribute.includes('media-reversed');
+
+        if (hasReversedClass) {
+          expect(await webUtil.verifyAttributes_(mediaBlock, zpattern.attProperties['large-media-reversed'])).toBeTruthy();
+        }
+        expect(await webUtil.verifyAttributes_(image, zpattern.attProperties['media-image'])).toBeTruthy();                
+      }
+
+    });      
+  });  
 
+  // Test 3 :Zpattern (dark) block   
   test(`${features[3].name},${features[3].tags}`, async ({ page, baseURL }) => {
     console.info(`[Test Page]: ${baseURL}${features[3].path}`);
+    const { data } = features[3];
 
     await test.step('step-1: Go to z-pattern (large) block test page', async () => {
       await page.goto(`${baseURL}${features[3].path}`);
@@ -61,7 +141,30 @@ test.describe('Milo Z Pattern Block test suite', () => {
     });
 
     await test.step('step-2: Verify z-pattern (dark) block specs', async () => {
-      expect(await zpattern.verifyZPattern('z-pattern (dark)')).toBeTruthy();
+      await expect(await zpattern.zPatternHeader).toContainText(data.headingText);
+      await expect(await zpattern.zPatternPText).toContainText(data.introText);      
+      await expect(await zpattern.mediaBlocks).toHaveCount(data.mediaBlockCount);
+
+      const mediaBlocks = await zpattern.mediaBlocks.all();
+      const mediaBlocksArray = await Promise.all(mediaBlocks.map(async (block) => block));
+      
+      for (let i = 0; i < mediaBlocksArray.length; i++) {
+        const mediaBlock = mediaBlocksArray[i];
+        await expect(await mediaBlock.locator('.detail-m')).toContainText(data.mediaBlocks[i]['detailText']);
+        await expect(await mediaBlock.locator('.heading-m')).toContainText(data.mediaBlocks[i]['h2Text']);
+        await expect(await mediaBlock.locator('.body-s').nth(0)).toContainText(data.mediaBlocks[i]['bodyText']);
+        await expect(await mediaBlock.locator('.blue')).toContainText(data.mediaBlocks[i]['blueButtonText']);
+
+        const image = await mediaBlock.locator('.image img').nth(0);
+        const classAttribute = await mediaBlock.getAttribute('class');
+        const hasReversedClass = classAttribute.includes('media-reversed');
+
+        if (hasReversedClass) {
+          expect(await webUtil.verifyAttributes_(mediaBlock, zpattern.attProperties['dark-media-reversed'])).toBeTruthy();
+        }
+        expect(await webUtil.verifyAttributes_(image, zpattern.attProperties['media-image'])).toBeTruthy();                
+      }      
     });
   });
 });
+