From 11b61cccf2aaa2e1c84ff45d03ef116ff9313f4b Mon Sep 17 00:00:00 2001 From: Santoshkumar Nateekar Date: Thu, 5 Dec 2024 09:23:13 -0800 Subject: [PATCH] [MWPW-162711][NALA] Update Table block tests to validate tooltip information (#3267) update table tests with tooltip Co-authored-by: Santoshkumar Sharanappa Nateekar --- nala/blocks/table/table.page.js | 117 +++++--- nala/blocks/table/table.spec.js | 515 ++++++++++++++++++++++++++++---- nala/blocks/table/table.test.js | 196 ++++++------ 3 files changed, 628 insertions(+), 200 deletions(-) diff --git a/nala/blocks/table/table.page.js b/nala/blocks/table/table.page.js index 03c25a2467..eaa03d9f28 100644 --- a/nala/blocks/table/table.page.js +++ b/nala/blocks/table/table.page.js @@ -1,4 +1,7 @@ /* eslint-disable no-return-await */ + +import { expect } from '@playwright/test'; + export default class Table { constructor(page, nth = 0) { this.page = page; @@ -9,67 +12,93 @@ export default class Table { this.collapseStickyTable = this.page.locator('.table.highlight.collapse.sticky').nth(nth); this.merchTable = this.page.locator('.table.merch').nth(nth); this.merchHighlightStickyTable = this.page.locator('.table.merch.highlight.sticky').nth(nth); + this.merchPricingBottom = this.page.locator('.table.merch.pricing-bottom').nth(nth); + this.merchButtonRight = this.page.locator('.table.merch.button-right').nth(nth); this.highlightRow = this.table.locator('.row-highlight'); + this.highlightRowColumns = this.highlightRow.locator('.col'); + this.headingRow = this.table.locator('.row-heading'); + this.headingRowColumns = this.headingRow.locator('.col'); + this.stickyRow = this.table.locator('.row-heading'); - this.headingRowColumns = this.headingRow.locator('.col'); this.rows = this.table.locator('.row'); this.sectionRows = this.table.locator('.section-row'); } - async getHighlightRowColumnTitle(colIndex) { - return await this.highlightRow.locator('.col-highlight').nth(colIndex); + // Verify Table Highlight Row + async verifyHighlightRow(data) { + for (const { colIndex, visibility, style, text } of data.highlightRow) { + const highlightRowColumn = await this.highlightRow.locator('.col-highlight').nth(colIndex); + if (visibility) { + await expect(await highlightRowColumn).toContainText(text); + if (style) { + await expect(await highlightRowColumn).toHaveAttribute('style', style); + } + } + } } - async getHeaderColumnTitle(colIndex) { - const headerColumn = await this.headingRow.locator(`.col-${colIndex}`); - return headerColumn.locator('.tracking-header'); - } + // Verify Table Header Row + async verifyHeaderRow(data, tableType = '') { + for (const headerCell of data.headerRow) { + const { + colIndex, heading, pricingText, additionalText, tooltip, buttons, + } = headerCell; - async getHeaderColumnPricing(colIndex) { - const headerColumn = await this.headingRow.locator(`.col-${colIndex}`); - return headerColumn.locator('.pricing'); - } + const headerColumn = await this.headingRow.locator(`.col-${colIndex}`); - async getHeaderColumnImg(colIndex) { - const headerColumn = await this.headingRow.locator(`.col-${colIndex}`); - return headerColumn.locator('img'); - } + await expect(await headerColumn.locator('.tracking-header')).toContainText(heading); + await expect(await headerColumn.locator('.pricing')).toContainText(pricingText); - async getHeaderColumnAdditionalText(colIndex) { - const headerColumn = await this.headingRow.locator(`.col-${colIndex}`); - return headerColumn.locator('p').nth(3); - } - - async getHeaderColumnOutlineButton(colIndex) { - const headerColumn = await this.headingRow.locator(`.col-${colIndex}`); - return headerColumn.locator('.con-button.outline'); - } - - async getHeaderColumnBlueButton(colIndex) { - const headerColumn = await this.headingRow.locator(`.col-${colIndex}`); - return headerColumn.locator('.con-button.blue'); - } - - async getSectionRowTitle(index) { - const sectionRow = await this.table.locator('.section-row').nth(index); - return sectionRow.locator('.section-row-title'); - } + // verify the additional text based on table type + if (additionalText) { + if (tableType === 'bottom-pricing') { + await expect(await headerColumn.locator('p').nth(2)).toContainText(additionalText); + } else { + await expect(await headerColumn.locator('p').nth(3)).toContainText(additionalText); + } + } + // verify tooltip information + if (tooltip) { + const headerColumnTooltip = await headerColumn.locator('.milo-tooltip'); + await expect(await headerColumnTooltip.locator('.icon-milo-info')).toBeVisible(); + await expect(await headerColumnTooltip).toHaveAttribute('data-tooltip', tooltip.tooltipText); + await headerColumnTooltip.hover(); + } - async getSectionRowMerchContent(index) { - const sectionRow = await this.table.locator('.section-row').nth(index); - return sectionRow.locator('.col-merch-content').nth(0); + // verify buttons + if (buttons && buttons.length > 0) { + for (const button of buttons) { + await expect(await headerColumn.locator(`.con-button.${button.type}`).nth(0)).toContainText(button.text); + if (button.justifycontent) { + await expect(await headerColumn.locator('.buttons-wrapper')).toHaveCSS('justify-content', button.justifycontent); + } + } + } + } } - async getSectionRowMerchContentImg(index) { - const sectionRow = await this.table.locator('.section-row').nth(index); - return sectionRow.locator('.col-merch-content img'); - } + // Verify Table Section Rows + async verifySectionRow(data) { + for (const sectionRow of data.sectionRows) { + const { rowIndex, columns } = sectionRow; + const secRow = await this.table.locator('.section-row').nth(rowIndex); + for (const column of columns) { + const sectionRowColumn = await secRow.locator(`.col-${column.colIndex}`); + await expect(await sectionRowColumn).toContainText(column.text); - async getSectionRowCell(rowIndex, colIndex) { - const sectionRow = await this.table.locator('.section-row').nth(rowIndex); - return sectionRow.locator(`.col-${colIndex}`); + if (column.imageVisible) { + await expect(await sectionRowColumn.locator('.col-merch-content img')).toBeVisible(); + } + if (column.tooltip) { + const tooltip = await sectionRowColumn.locator('.milo-tooltip'); + await expect(await tooltip.locator('.icon-milo-info')).toBeVisible(); + await expect(await tooltip).toHaveAttribute('data-tooltip', column.tooltipText); + await tooltip.hover(); + } + } + } } } diff --git a/nala/blocks/table/table.spec.js b/nala/blocks/table/table.spec.js index 8ac863fbcf..cbb56a96a9 100644 --- a/nala/blocks/table/table.spec.js +++ b/nala/blocks/table/table.spec.js @@ -1,3 +1,4 @@ +/* eslint-disable object-curly-newline */ module.exports = { FeatureName: 'Table Block', features: [ @@ -9,18 +10,49 @@ module.exports = { rowsCount: 9, headerRowColCount: 5, sectionRowCount: 8, - headerCell2: { - heading: 'Heading Title-2', - pricingText: 'Pricing-2', - outlineButtonText: 'Free trial', - blueButtonText: 'Buy now', - }, - sectionRow2: { - sectionRowTitle: 'Row-1.1, Title', - cell22: 'Content', - }, + headerRow: [ + { + colIndex: 2, + heading: 'Heading Title-2', + pricingText: 'Pricing-2', + buttons: [ + { text: 'Free trial', type: 'outline', justifycontent: 'center' }, + { text: 'Buy now', type: 'blue', justifycontent: 'center' }, + ], + }, + ], + sectionRows: [ + { + rowIndex: 2, + columns: [ + { + colIndex: 1, + text: 'Row-1.1, Title', + imageVisible: false, + tooltip: true, + tooltipPosition: 'none', + tooltipText: 'Tooltip position set to none', + }, + { colIndex: 2, text: 'Content', imageVisible: false }, + ], + }, + { + rowIndex: 3, + columns: [ + { + colIndex: 1, + text: 'Row-1.2, Title', + imageVisible: false, + tooltip: true, + tooltipPosition: 'top', + tooltipText: 'Tooltip position set to top', + }, + { colIndex: 2, text: '', imageVisible: false }, + ], + }, + ], }, - tags: '@table @smoke @regression @milo', + tags: '@table-1 @smoke @regression @milo', }, { tcid: '1', @@ -30,21 +62,45 @@ module.exports = { rowsCount: 10, headerRowColCount: 5, sectionRowCount: 8, - hightlightRow: { - cell12: 'Highlight-2', - cell13: 'Highlight-3', - cell14: 'Highlight-4', - }, - headerCell3: { - heading: 'Heading Title-3', - pricingText: 'Pricing-3', - outlineButtonText: 'Free trial', - blueButtonText: 'Buy now', - }, - sectionRow2: { - sectionRowTitle: 'Row-1.1, Title', - cell22: 'Content', - }, + highlightRow: [ + { colIndex: 0, visibility: false, text: '' }, + { colIndex: 1, visibility: true, style: '', text: 'Highlight-2' }, + { colIndex: 2, visibility: true, style: '', text: 'Highlight-3' }, + { colIndex: 3, visibility: true, style: '', text: 'Highlight-4' }, + { colIndex: 4, visibility: false, style: '', text: '' }, + ], + headerRow: [ + { + colIndex: 3, + heading: 'Heading Title-3', + pricingText: 'Pricing-3', + tooltip: { + tooltip: true, + tooltipPosition: 'left', + tooltipText: 'Tooltip position set to left', + }, + buttons: [ + { text: 'Free trial', type: 'outline', justifycontent: 'center' }, + { text: 'Buy now', type: 'blue', justifycontent: 'center' }, + ], + }, + ], + sectionRows: [ + { + rowIndex: 1, + columns: [ + { colIndex: 1, text: 'Section-1, Title', imageVisible: false }, + { colIndex: 2, text: '', imageVisible: false }, + ], + }, + { + rowIndex: 2, + columns: [ + { colIndex: 1, text: 'Row-1.1, Title', imageVisible: false }, + { colIndex: 2, text: 'Content', imageVisible: false }, + ], + }, + ], }, tags: '@table @smoke @regression @milo', }, @@ -56,16 +112,33 @@ module.exports = { rowsCount: 9, headerRowColCount: 5, sectionRowCount: 8, - headerCell4: { - heading: 'Heading Title-4', - pricingText: 'Pricing-4', - outlineButtonText: 'Free trial', - blueButtonText: 'Buy now', - }, - sectionRow2: { - sectionRowTitle: 'Row-1.1, Title', - cell22: 'Content', - }, + headerRow: [ + { + colIndex: 4, + heading: 'Heading Title-4', + pricingText: 'Pricing-4', + buttons: [ + { text: 'Free trial', type: 'outline', justifycontent: 'center' }, + { text: 'Buy now', type: 'blue', justifycontent: 'center' }, + ], + }, + ], + sectionRows: [ + { + rowIndex: 1, + columns: [ + { colIndex: 1, text: 'Section-1, Title', imageVisible: false }, + { colIndex: 2, text: '', imageVisible: false }, + ], + }, + { + rowIndex: 2, + columns: [ + { colIndex: 1, text: 'Row-1.1, Title', imageVisible: false }, + { colIndex: 2, text: 'Content', imageVisible: false }, + ], + }, + ], }, tags: '@table @smoke @regression @milo', }, @@ -77,21 +150,40 @@ module.exports = { rowsCount: 10, headerRowColCount: 5, sectionRowCount: 8, - hightlightRow: { - cell12: 'Highlight-2', - cell13: 'Highlight-3', - cell14: 'Highlight-4', - }, - headerCell5: { - heading: 'Heading Title-5', - pricingText: 'Pricing-5', - outlineButtonText: 'Free trial', - blueButtonText: 'Buy now', - }, - sectionRow2: { - sectionRowTitle: 'Row-1.1, Title', - cell22: 'Content', - }, + highlightRow: [ + { colIndex: 0, visibility: false, text: '' }, + { colIndex: 1, visibility: true, style: '', text: 'Highlight-2' }, + { colIndex: 2, visibility: true, style: '', text: 'Highlight-3' }, + { colIndex: 3, visibility: true, style: '', text: 'Highlight-4' }, + { colIndex: 4, visibility: false, style: '', text: '' }, + ], + headerRow: [ + { + colIndex: 3, + heading: 'Heading Title-3', + pricingText: 'Pricing-3', + buttons: [ + { text: 'Free trial', type: 'outline', justifycontent: 'center' }, + { text: 'Buy now', type: 'blue', justifycontent: 'center' }, + ], + }, + ], + sectionRows: [ + { + rowIndex: 1, + columns: [ + { colIndex: 1, text: 'Section-1, Title', imageVisible: false }, + { colIndex: 2, text: '', imageVisible: false }, + ], + }, + { + rowIndex: 2, + columns: [ + { colIndex: 1, text: 'Row-1.1, Title', imageVisible: false }, + { colIndex: 2, text: 'Content', imageVisible: false }, + ], + }, + ], }, tags: '@table @smoke @regression @milo', }, @@ -103,17 +195,316 @@ module.exports = { rowsCount: 9, headerRowColCount: 3, sectionRowCount: 8, - headerCell1: { - heading: 'Heading Title-1', - pricingText: 'Pricing-1', - AdditionalText: 'Additional Text-1', - outlineButtonText: 'Free trial', - blueButtonText: 'Buy now', - }, - sectionRow2: { - merchContent: 'Section Content-1.1', - image: 'yes', - }, + headerRow: [ + { + colIndex: 1, + heading: 'Heading Title-1', + pricingText: 'Pricing-1', + AdditionalText: 'Additional Text-1', + imageVisible: true, + buttons: [ + { + text: 'Free trial', + type: 'outline', + justifycontent: 'flex-start', + }, + { text: 'Buy now', type: 'blue', justifycontent: 'flex-start' }, + ], + }, + ], + sectionRows: [ + { + rowIndex: 1, + columns: [ + { colIndex: 1, text: 'Section-1, Title', imageVisible: false }, + { colIndex: 2, text: 'Section-1, Title', imageVisible: false }, + { colIndex: 3, text: 'Section-1, Title', imageVisible: false }, + ], + }, + { + rowIndex: 2, + columns: [ + { colIndex: 1, text: 'Section Content-1.1', imageVisible: true }, + { colIndex: 2, text: 'Section Content-1.1', imageVisible: false }, + { colIndex: 3, text: 'Section Content-1.1', imageVisible: false }, + ], + }, + ], + }, + tags: '@table @smoke @regression @milo', + }, + { + tcid: '5', + name: '@Table (merch, highlight, sticky)', + path: '/drafts/nala/blocks/table/table-merch-highlight-sticky1', + data: { + rowsCount: 10, + highlightRowColCount: 3, + headerRowColCount: 3, + sectionRowCount: 8, + highlightRow: [ + { colIndex: 0, visibility: false, text: '' }, + { + colIndex: 1, + visibility: true, + style: 'background: green;', + text: 'Highlight-2', + }, + { + colIndex: 2, + visibility: true, + style: 'background: rgb(53, 123, 235);', + text: 'Highlight-2', + }, + ], + headerRow: [ + { + colIndex: 1, + heading: 'Heading Title-1', + pricingText: 'Pricing-1', + additionalText: 'Additional Text-1', + tooltip: { + tooltip: true, + tooltipPosition: 'left', + tooltipText: 'Tooltip position set to left', + }, + buttons: [ + { text: 'Free trial', type: 'outline' }, + { text: 'Buy now', type: 'blue' }, + ], + }, + { + colIndex: 2, + heading: 'Heading Title-2', + pricingText: 'Pricing-2', + additionalText: 'Additional Text-2', + tooltip: { + tooltip: true, + tooltipPosition: 'top', + tooltipText: 'Tooltip position set to top', + }, + buttons: [ + { + text: 'Free trial', + type: 'outline', + justifycontent: 'flex-start', + }, + { text: 'Buy now', type: 'blue', justifycontent: 'flex-start' }, + ], + }, + { + colIndex: 3, + heading: 'Heading Title-3', + pricingText: 'Pricing-3', + additionalText: 'Additional Text-3', + buttons: [ + { text: 'Free trial', type: 'outline' }, + { text: 'Buy now', type: 'blue' }, + ], + }, + ], + sectionRows: [ + { + rowIndex: 1, + columns: [ + { colIndex: 1, text: 'Section-1, Title', imageVisible: false }, + { colIndex: 2, text: 'Section-1, Title', imageVisible: false }, + { colIndex: 3, text: 'Section-1, Title', imageVisible: false }, + ], + }, + { + rowIndex: 2, + columns: [ + { colIndex: 1, text: 'Section Content-1.1', imageVisible: true }, + { colIndex: 2, text: 'Section Content-1.1', imageVisible: false }, + { colIndex: 3, text: 'Section Content-1.1', imageVisible: false }, + ], + }, + { + rowIndex: 3, + columns: [ + { colIndex: 1, text: 'Section Content-1.2', imageVisible: false }, + { colIndex: 2, text: 'Section Content-1.2', imageVisible: false }, + { colIndex: 3, text: 'Section Content-1.2', imageVisible: false }, + ], + }, + { + rowIndex: 4, + columns: [ + { colIndex: 1, text: '', imageVisible: false }, + { colIndex: 2, text: '', imageVisible: false }, + { colIndex: 3, text: '', imageVisible: false }, + ], + }, + ], + }, + tags: '@table @smoke @regression @milo', + }, + { + tcid: '6', + name: '@Table (merch, pricing-bottom)', + path: '/drafts/nala/blocks/table/table-march-pricing-bottom', + data: { + rowsCount: 9, + headerRowColCount: 3, + sectionRowCount: 8, + headerRow: [ + { + colIndex: 1, + imageVisible: true, + heading: 'Heading Title-1', + pricingText: 'Pricing-1', + additionalText: 'Additional Text-1', + buttons: [ + { text: 'Free trial', type: 'outline' }, + { text: 'Buy now', type: 'blue' }, + ], + }, + { + colIndex: 2, + imageVisible: true, + heading: 'Heading Title-2', + pricingText: 'Pricing-2', + additionalText: 'Additional Text-2', + buttons: [ + { text: 'Free trial', type: 'outline' }, + { text: 'Buy now', type: 'blue' }, + ], + }, + { + colIndex: 3, + imageVisible: true, + heading: 'Heading Title-3', + pricingText: 'Pricing-3', + additionalText: 'Additional Text-3', + buttons: [ + { + text: 'Free trial', + type: 'outline', + justifycontent: 'flex-start', + }, + { text: 'Buy now', type: 'blue', justifycontent: 'flex-start' }, + ], + }, + ], + sectionRows: [ + { + rowIndex: 1, + columns: [ + { colIndex: 1, text: 'Section-1, Title', imageVisible: false }, + { colIndex: 2, text: 'Section-1, Title', imageVisible: false }, + { colIndex: 3, text: 'Section-1, Title', imageVisible: false }, + ], + }, + { + rowIndex: 2, + columns: [ + { colIndex: 1, text: 'Section Content-1.1', imageVisible: true }, + { colIndex: 2, text: 'Section Content-1.1', imageVisible: false }, + { colIndex: 3, text: 'Section Content-1.1', imageVisible: false }, + ], + }, + { + rowIndex: 3, + columns: [ + { colIndex: 1, text: 'Section Content-1.2', imageVisible: false }, + { colIndex: 2, text: 'Section Content-1.2', imageVisible: false }, + { colIndex: 3, text: 'Section Content-1.2', imageVisible: false }, + ], + }, + { + rowIndex: 4, + columns: [ + { colIndex: 1, text: '', imageVisible: false }, + { colIndex: 2, text: '', imageVisible: false }, + { colIndex: 3, text: '', imageVisible: false }, + ], + }, + ], + }, + tags: '@table-6 @smoke @regression @milo', + }, + { + tcid: '7', + name: '@Table (merch, button-right)', + path: '/drafts/nala/blocks/table/table-merch-button-right', + data: { + rowsCount: 9, + headerRowColCount: 3, + sectionRowCount: 8, + headerRow: [ + { + colIndex: 1, + imageVisible: true, + heading: 'Heading Title-1', + pricingText: 'Pricing-1', + additionalText: 'Additional Text-1', + buttons: [ + { + text: 'Free trial', + type: 'outline', + justifycontent: 'flex-end', + }, + { text: 'Buy now', type: 'blue', justifycontent: 'flex-end' }, + ], + }, + { + colIndex: 2, + imageVisible: true, + heading: 'Heading Title-2', + pricingText: 'Pricing-2', + additionalText: 'Additional Text-2', + buttons: [ + { text: 'Free trial', type: 'outline' }, + { text: 'Buy now', type: 'blue' }, + ], + }, + { + colIndex: 3, + imageVisible: true, + heading: 'Heading Title-3', + pricingText: 'Pricing-3', + additionalText: 'Additional Text-3', + buttons: [ + { text: 'Free trial', type: 'outline' }, + { text: 'Buy now', type: 'blue' }, + ], + }, + ], + sectionRows: [ + { + rowIndex: 1, + columns: [ + { colIndex: 1, text: 'Section-1, Title', imageVisible: false }, + { colIndex: 2, text: 'Section-1, Title', imageVisible: false }, + { colIndex: 3, text: 'Section-1, Title', imageVisible: false }, + ], + }, + { + rowIndex: 2, + columns: [ + { colIndex: 1, text: 'Section Content-1.1', imageVisible: true }, + { colIndex: 2, text: 'Section Content-1.1', imageVisible: false }, + { colIndex: 3, text: 'Section Content-1.1', imageVisible: false }, + ], + }, + { + rowIndex: 3, + columns: [ + { colIndex: 1, text: 'Section Content-1.2', imageVisible: false }, + { colIndex: 2, text: 'Section Content-1.2', imageVisible: false }, + { colIndex: 3, text: 'Section Content-1.2', imageVisible: false }, + ], + }, + { + rowIndex: 4, + columns: [ + { colIndex: 1, text: '', imageVisible: false }, + { colIndex: 2, text: '', imageVisible: false }, + { colIndex: 3, text: '', imageVisible: false }, + ], + }, + ], }, tags: '@table @smoke @regression @milo', }, diff --git a/nala/blocks/table/table.test.js b/nala/blocks/table/table.test.js index 9b04e8b01a..cf1ef914df 100644 --- a/nala/blocks/table/table.test.js +++ b/nala/blocks/table/table.test.js @@ -1,7 +1,6 @@ import { expect, test } from '@playwright/test'; import { features } from './table.spec.js'; import TableBlock from './table.page.js'; -import { runAccessibilityTest } from '../../libs/accessibility.js'; let table; @@ -29,22 +28,9 @@ test.describe('Milo Table block feature test suite', () => { await expect(await table.headingRowColumns).toHaveCount(data.headerRowColCount); await expect(await table.sectionRows).toHaveCount(data.sectionRowCount); - // verify header row cell - const headerCell = data.headerCell2; - await expect(await table.getHeaderColumnTitle(2)).toContainText(headerCell.heading); - await expect(await table.getHeaderColumnPricing(2)).toContainText(headerCell.pricingText); - await expect(await table.getHeaderColumnOutlineButton(2)).toContainText(headerCell.outlineButtonText); - await expect(await table.getHeaderColumnBlueButton(2)).toContainText(headerCell.blueButtonText); - - // verify section row cell - const sectionCell = data.sectionRow2; - await expect(await table.getSectionRowTitle(2)).toContainText(sectionCell.sectionRowTitle); - await expect(await table.getSectionRowCell(2, 2)).toContainText(sectionCell.cell22); - }); - - await test.step('step-3: Verify the accessibility test on the table(default) block', async () => { - // The accessibility test is failing, so skipping it. - await runAccessibilityTest({ page, testScope: table.table, skipA11yTest: true }); + // verify table header and section rows content + await table.verifyHeaderRow(data); + await table.verifySectionRow(data); }); }); @@ -67,28 +53,10 @@ test.describe('Milo Table block feature test suite', () => { await expect(await table.headingRowColumns).toHaveCount(data.headerRowColCount); await expect(await table.sectionRows).toHaveCount(data.sectionRowCount); - // verify highlighter row - const highlighter = data.hightlightRow; - await expect(await table.getHighlightRowColumnTitle(1)).toContainText(highlighter.cell12); - await expect(await table.getHighlightRowColumnTitle(2)).toContainText(highlighter.cell13); - await expect(await table.getHighlightRowColumnTitle(3)).toContainText(highlighter.cell14); - - // verify header row cell - const headerCell = data.headerCell3; - await expect(await table.getHeaderColumnTitle(3)).toContainText(headerCell.heading); - await expect(await table.getHeaderColumnPricing(3)).toContainText(headerCell.pricingText); - await expect(await table.getHeaderColumnOutlineButton(3)).toContainText(headerCell.outlineButtonText); - await expect(await table.getHeaderColumnBlueButton(3)).toContainText(headerCell.blueButtonText); - - // verify section row cell - const sectionCell = data.sectionRow2; - await expect(await table.getSectionRowTitle(2)).toContainText(sectionCell.sectionRowTitle); - await expect(await table.getSectionRowCell(2, 2)).toContainText(sectionCell.cell22); - }); - - await test.step('step-3: Verify the accessibility test on the table(highlight) block', async () => { - // The accessibility test is failing, so skipping it. - await runAccessibilityTest({ page, testScope: table.highlightTable, skipA11yTest: true }); + // verify highlighter, header, and section rows content + await table.verifyHighlightRow(data); + await table.verifyHeaderRow(data); + await table.verifySectionRow(data); }); }); @@ -104,31 +72,21 @@ test.describe('Milo Table block feature test suite', () => { }); await test.step('step-2: Verify table content/specs', async () => { - // verify sticky table header and attributes + // verify table header row attributes ( class, position(sticky) and top ) await expect(await table.stickyTable).toBeVisible(); + await expect(await table.stickyRow).toHaveAttribute('class', 'row row-1 row-heading top-border-transparent'); + await expect(await table.stickyRow).toHaveCSS('position', 'sticky'); + await expect(await table.stickyRow).toHaveCSS('top', '64px'); // verify table row, column count await expect(await table.rows).toHaveCount(data.rowsCount); await expect(await table.headingRowColumns).toHaveCount(data.headerRowColCount); await expect(await table.sectionRows).toHaveCount(data.sectionRowCount); - // verify header row cell - const headerCell = data.headerCell4; - await expect(await table.getHeaderColumnTitle(4)).toContainText(headerCell.heading); - await expect(await table.getHeaderColumnPricing(4)).toContainText(headerCell.pricingText); - await expect(await table.getHeaderColumnOutlineButton(4)).toContainText(headerCell.outlineButtonText); - await expect(await table.getHeaderColumnBlueButton(4)).toContainText(headerCell.blueButtonText); - - // verify section row cell - const sectionCell = data.sectionRow2; - await expect(await table.getSectionRowTitle(2)).toContainText(sectionCell.sectionRowTitle); - await expect(await table.getSectionRowCell(2, 2)).toContainText(sectionCell.cell22); - }); - - await test.step('step-3: Verify the accessibility test on the table(sticky) block', async () => { - // The accessibility test is failing, so skipping it. - await runAccessibilityTest({ page, testScope: table.stickyTable, skipA11yTest: true }); + // verify header and section rows content + await table.verifyHeaderRow(data); + await table.verifySectionRow(data); }); }); @@ -148,34 +106,18 @@ test.describe('Milo Table block feature test suite', () => { await expect(await table.collapseStickyTable).toBeVisible(); await expect(table.highlightRow).toHaveClass(/row.*row-1.*row-highlight/); await expect(table.stickyRow).toHaveClass(/row.*row-2.*row-heading/); + await expect(await table.stickyRow).toHaveCSS('position', 'sticky'); + await expect(await table.stickyRow).toHaveCSS('top', '114px'); - // verify table row, column count + // verify table rows and columns count await expect(await table.rows).toHaveCount(data.rowsCount); await expect(await table.headingRowColumns).toHaveCount(data.headerRowColCount); await expect(await table.sectionRows).toHaveCount(data.sectionRowCount); - // verify highlighter row - const highlighter = data.hightlightRow; - await expect(await table.getHighlightRowColumnTitle(1)).toContainText(highlighter.cell12); - await expect(await table.getHighlightRowColumnTitle(2)).toContainText(highlighter.cell13); - await expect(await table.getHighlightRowColumnTitle(3)).toContainText(highlighter.cell14); - - // verify header row cell - const headerCell = data.headerCell5; - await expect(await table.getHeaderColumnTitle(5)).toContainText(headerCell.heading); - await expect(await table.getHeaderColumnPricing(5)).toContainText(headerCell.pricingText); - await expect(await table.getHeaderColumnOutlineButton(5)).toContainText(headerCell.outlineButtonText); - await expect(await table.getHeaderColumnBlueButton(5)).toContainText(headerCell.blueButtonText); - - // verify section row cell - const sectionCell = data.sectionRow2; - await expect(await table.getSectionRowTitle(2)).toContainText(sectionCell.sectionRowTitle); - await expect(await table.getSectionRowCell(2, 2)).toContainText(sectionCell.cell22); - }); - - await test.step('step-3: Verify the accessibility test on the table(highlight, collapse, sticky) block', async () => { - // The accessibility test is failing, so skipping it. - await runAccessibilityTest({ page, testScope: table.collapseStickyTable, skipA11yTest: true }); + // verify highlighter, header, and section rows content + await table.verifyHighlightRow(data); + await table.verifyHeaderRow(data); + await table.verifySectionRow(data); }); }); @@ -194,28 +136,94 @@ test.describe('Milo Table block feature test suite', () => { // verify merch table await expect(await table.merchTable).toBeVisible(); - // verify table row, column count + // verify table rows and columns count await expect(await table.rows).toHaveCount(data.rowsCount); await expect(await table.headingRowColumns).toHaveCount(data.headerRowColCount); await expect(await table.sectionRows).toHaveCount(data.sectionRowCount); - // verify merch table header row cell - const headerCell = data.headerCell1; - await expect(await table.getHeaderColumnTitle(1)).toContainText(headerCell.heading); - await expect(await table.getHeaderColumnPricing(1)).toContainText(headerCell.pricingText); - await expect(await table.getHeaderColumnAdditionalText(1)).toContainText(headerCell.AdditionalText); - await expect(await table.getHeaderColumnOutlineButton(1)).toContainText(headerCell.outlineButtonText); - await expect(await table.getHeaderColumnBlueButton(1)).toContainText(headerCell.blueButtonText); + // verify header and section rows content + await table.verifyHeaderRow(data); + await table.verifySectionRow(data); + }); + }); + + // Test 5 : Table (merch, highlight, sticky) + test(`[Test Id - ${features[5].tcid}] ${features[5].name} ${features[5].tags}`, async ({ page, baseURL }) => { + const { path, data } = features[5]; + console.info(`[Test Page]: ${baseURL}${path}`); - // verify merch table section row cell - const sectionCell = data.sectionRow2; - await expect(await table.getSectionRowMerchContent(2)).toContainText(sectionCell.merchContent); - await expect(await table.getSectionRowMerchContentImg(2)).toBeVisible(); + // Step 1: Navigate to the test page + await test.step('step-1: Go to Table block test page', async () => { + await page.goto(`${baseURL}${path}`); + await page.waitForLoadState('domcontentloaded'); + await expect(page).toHaveURL(`${baseURL}${path}`); }); - await test.step('step-3: Verify the accessibility test on the table(merch) block', async () => { - // The accessibility test is failing, so skipping it. - await runAccessibilityTest({ page, testScope: table.merchTable, skipA11yTest: true }); + // Step 2: Verify table structure and content + await test.step('step-2: Verify table content/specs', async () => { + // Verify visibility and row/column counts + await expect(await table.merchHighlightStickyTable).toBeVisible(); + await expect(await table.rows).toHaveCount(data.rowsCount); + await expect(await table.highlightRowColumns).toHaveCount(data.highlightRowColCount); + await expect(await table.headingRowColumns).toHaveCount(data.headerRowColCount); + await expect(await table.sectionRows).toHaveCount(data.sectionRowCount); + + await table.verifyHighlightRow(data); + await table.verifyHeaderRow(data); + await table.verifySectionRow(data); + }); + }); + + // Test 6 : Table (merch, pricing-bottom) + test(`[Test Id - ${features[6].tcid}] ${features[6].name} ${features[6].tags}`, async ({ page, baseURL }) => { + const { path, data } = features[6]; + console.info(`[Test Page]: ${baseURL}${path}`); + + // Step 1: Navigate to the test page + await test.step('step-1: Go to Table block test page', async () => { + await page.goto(`${baseURL}${path}`); + await page.waitForLoadState('domcontentloaded'); + await expect(page).toHaveURL(`${baseURL}${path}`); + }); + + await test.step('step-2: Verify table structure and content/specs', async () => { + // Verify visibility and row/column counts + await expect(await table.merchPricingBottom).toBeVisible(); + await expect(await table.rows).toHaveCount(data.rowsCount); + await expect(await table.headingRowColumns).toHaveCount(data.headerRowColCount); + await expect(await table.sectionRows).toHaveCount(data.sectionRowCount); + + await table.verifyHeaderRow(data, 'bottom-pricing'); + await table.verifySectionRow(data); + }); + }); + + // Test 7 : Table (merch, button-right) + test(`[Test Id - ${features[7].tcid}] ${features[7].name} ${features[7].tags}`, async ({ page, baseURL }) => { + const { path, data } = features[7]; + console.info(`[Test Page]: ${baseURL}${path}`); + + // Step 1: Navigate to the test page + await test.step('step-1: Go to Table block test page', async () => { + await page.goto(`${baseURL}${path}`); + await page.waitForLoadState('domcontentloaded'); + await expect(page).toHaveURL(`${baseURL}${path}`); + }); + + // Step 2: Verify table structure and content + await test.step('step-2: Verify table content/specs', async () => { + // Verify table visibility + await expect(await table.merchButtonRight).toBeVisible(); + + // verify table rows and coloumn content + await expect(await table.rows).toHaveCount(data.rowsCount); + await expect(await table.headingRowColumns).toHaveCount(data.headerRowColCount); + await expect(await table.sectionRows).toHaveCount(data.sectionRowCount); + await expect(await table.sectionRows).toHaveCount(data.sectionRowCount); + + // verify header and section row cells content + await table.verifyHeaderRow(data); + await table.verifySectionRow(data); }); }); });