-
Notifications
You must be signed in to change notification settings - Fork 35
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[MWPW-139085] : Chart block tests scripts (#203)
chart test scripts Co-authored-by: nateekar <[email protected]>
- Loading branch information
Showing
3 changed files
with
348 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,93 @@ | ||
| module.exports = { | ||
| FeatureName: 'Chart Block', | ||
| features: [ | ||
| { | ||
| tcid: '0', | ||
| name: '@Chart (area, green, border)', | ||
| path: '/drafts/nala/blocks/chart/chart-area-green-border', | ||
| data: { | ||
| chartType: 'area green border', | ||
| titleH3: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', | ||
| subTitle: 'Revenue dollars: 2020 vs 2021 forecasted vs 2021 actuals.', | ||
| footNote: 'Footnote lorem ipsum dolor sit amet, consectetuer adipiscing elit.', | ||
| }, | ||
| tags: '@chart @smoke @regression @milo', | ||
| }, | ||
| { | ||
| tcid: '1', | ||
| name: '@Chart (bar, border)', | ||
| path: '/drafts/nala/blocks/chart/chart-bar-border', | ||
| data: { | ||
| chartType: 'bar border large', | ||
| titleH3: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', | ||
| subTitle: 'Revenue dollars: 2020 vs 2021 forecasted vs 2021 actuals.', | ||
| footNote: 'Footnote lorem ipsum dolor sit amet, consectetuer adipiscing elit.', | ||
| }, | ||
| tags: '@chart @smoke @regression @milo', | ||
| }, | ||
| { | ||
| tcid: '2', | ||
| name: '@Chart (column, border)', | ||
| path: '/drafts/nala/blocks/chart/chart-column-border', | ||
| data: { | ||
| chartType: 'column border large', | ||
| titleH3: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', | ||
| subTitle: 'Revenue dollars: 2020 vs 2021 forecasted vs 2021 actuals.', | ||
| footNote: 'Footnote lorem ipsum dolor sit amet, consectetuer adipiscing elit.', | ||
| }, | ||
| tags: '@chart @smoke @regression @milo', | ||
| }, | ||
| { | ||
| tcid: '3', | ||
| name: '@Chart (donut, border)', | ||
| path: '/drafts/nala/blocks/chart/chart-donut-border', | ||
| data: { | ||
| chartType: 'donut border large', | ||
| titleH3: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', | ||
| subTitle: 'Revenue dollars: 2020 vs 2021 forecasted vs 2021 actuals.', | ||
| footNote: 'Footnote lorem ipsum dolor sit amet, consectetuer adipiscing elit.', | ||
| }, | ||
| tags: '@chart @smoke @regression @milo', | ||
| }, | ||
| { | ||
| tcid: '4', | ||
| name: '@Chart (line, border)', | ||
| path: '/drafts/nala/blocks/chart/chart-line-border', | ||
| data: { | ||
| chartType: 'line border large', | ||
| titleH3: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', | ||
| subTitle: 'Revenue dollars: 2020 vs 2021 forecasted vs 2021 actuals.', | ||
| footNote: 'Footnote lorem ipsum dolor sit amet, consectetuer adipiscing elit.', | ||
| }, | ||
| tags: '@chart @smoke @regression @milo', | ||
| }, | ||
| { | ||
| tcid: '5', | ||
| name: '@Chart (oversized-number, border)', | ||
| path: '/drafts/nala/blocks/chart/chart-oversized-number-border', | ||
| data: { | ||
| chartType: 'oversized-number border large', | ||
| titleH3: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', | ||
| subTitle: 'Revenue dollars: 2020 vs 2021 forecasted vs 2021 actuals.', | ||
| circleNumber: '25', | ||
| circleSubTitle: 'Out of 60 days', | ||
| footNote: 'Footnote lorem ipsum dolor sit amet, consectetuer adipiscing elit.', | ||
| }, | ||
| tags: '@chart @smoke @regression @milo', | ||
| }, | ||
| { | ||
| tcid: '6', | ||
| name: '@Chart (pie, border)', | ||
| path: '/drafts/nala/blocks/chart/chart-pie-border', | ||
| data: { | ||
| chartType: 'pie border large', | ||
| titleH3: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', | ||
| subTitle: 'Revenue dollars: 2020 vs 2021 forecasted vs 2021 actuals.', | ||
| footNote: 'Footnote lorem ipsum dolor sit amet, consectetuer adipiscing elit.', | ||
| }, | ||
| tags: '@chart @smoke @regression @milo', | ||
| }, | ||
| ], | ||
| }; | ||
|
|
||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,55 @@ | ||
| export default class Chart { | ||
| constructor(page, nth = 0) { | ||
| this.page = page; | ||
| // chart locators | ||
| this.chart = this.page.locator('.chart').nth(nth); | ||
| this.type = this.page.locator('.chart').nth(nth); | ||
|
|
||
| this.title = this.chart.locator('.title'); | ||
| this.subTitle= this.chart.locator('.subtitle').nth(0); | ||
| this.container = this.chart.locator('.chart-container'); | ||
| this.svgImg = this.container.locator('svg'); | ||
| this.svgImgCircle = this.container.locator('circle'); | ||
| this.svgImgCircleNumber = this.container.locator('text.number') | ||
| this.svgImgCircleSubTitle = this.container.locator('text.subtitle') | ||
|
|
||
| this.legendChrome = page.locator('text[dominant-baseline="central"]').filter({ hasText: 'Chrome' }); | ||
| this.legendFirefox = page.locator('text[dominant-baseline="central"]').filter({ hasText: 'Firefox' }); | ||
| this.legendEdge = page.locator('text[dominant-baseline="central"]').filter({ hasText: 'Edge' }); | ||
| this.legendSafari = page.locator('text[dominant-baseline="central"]').filter({ hasText: 'Safari' }); | ||
| this.legendOpera = page.locator('text[dominant-baseline="central"]').filter({ hasText: 'Opera' }); | ||
| this.legendChromeAndroid = page.locator('text[dominant-baseline="central"]').filter({ hasText: 'Chrome Android' }); | ||
| this.legendFirefoxAndroid= page.locator('text[dominant-baseline="central"]').filter({ hasText: 'Firefox Android' }); | ||
| this.legendSafariIos = page.locator('text[dominant-baseline="central"]').filter({ hasText: 'Safari iOS' }); | ||
| this.legendOperaAndroid = page.locator('text[dominant-baseline="central"]').filter({ hasText: 'Opera Android' }); | ||
| this.legendSamsungInternet = page.locator('text[dominant-baseline="central"]').filter({ hasText: 'Samsung Internet' }); | ||
| this.legendAdobeAcrobat = page.locator('text[dominant-baseline="central"][fill="#333"]').filter({ hasText: 'Adobe Acrobat' }); | ||
| this.legendAdobeExperienceManager = page.locator('text[dominant-baseline="central"][fill="#333"]').filter({ hasText: 'Adobe Experience Manager' }); | ||
|
|
||
| this.x_axisMonday = page.locator('text[dominant-baseline="central"]').filter({ hasText: 'Monday' }); | ||
| this.x_axisTuesday = page.locator('text[dominant-baseline="central"]').filter({ hasText: 'Tuesday' }); | ||
| this.x_axisSunday = page.locator('text[dominant-baseline="central"]').filter({ hasText: 'Sunday' }); | ||
| this.y_axis50K = page.locator('text[dominant-baseline="central"]').filter({ hasText: '50K', exact: true }); | ||
| this.y_axis100K = page.locator('text[dominant-baseline="central"]').filter({ hasText: '100K', exact: true }); | ||
| this.y_axis250K = page.locator('text[dominant-baseline="central"]').filter({ hasText: '250K', exact: true }); | ||
| this.y_axis300K = page.locator('text[dominant-baseline="central"]').filter({ hasText: '300K', exact: true }); | ||
|
|
||
| this.donutTitle = page.locator('text[dominant-baseline="central"]').filter({ hasText: 'Hello World', exact: true }); | ||
|
|
||
| this.pieChartLabelAdobeSign = page.locator('text[dominant-baseline="central"][text-anchor="end"]').filter({ hasText: 'Adobe Sign' }); | ||
| this.pieChartLabelAdobePhotoshop = page.locator('text[dominant-baseline="central"][text-anchor="end"]').filter({ hasText: 'Adobe Photoshop' }); | ||
| this.pieChartLabelAdobePremier = page.locator('text[dominant-baseline="central"][text-anchor="end"]').filter({ hasText: 'Adobe Premier' }); | ||
|
|
||
| // chart footer | ||
| this.footNote = this.chart.locator('.footnote') | ||
|
|
||
| // chart attributes | ||
| this.attributes = { | ||
| 'svgViewBox': { | ||
| viewBox: '0 0 430 430', | ||
| }, | ||
| }; | ||
| } | ||
| } | ||
|
|
||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,200 @@ | ||
| import { expect, test } from '@playwright/test'; | ||
| import { features } from '../../features/milo/chart.block.spec.js'; | ||
| import ChartBlock from '../../selectors/milo/chart.block.page.js'; | ||
|
|
||
| let chart; | ||
|
|
||
| test.describe('Milo Chart feature test suite', () => { | ||
| test.beforeEach(async ({ page }) => { | ||
| chart = new ChartBlock(page); | ||
| }); | ||
|
|
||
| // Test 0 : Chart (area, green, border) | ||
| test(`${features[0].name},${features[0].tags}`, async ({ page, baseURL }) => { | ||
| console.info(`[Test Page]: ${baseURL}${features[0].path}`); | ||
| const data = features[0].data; | ||
|
|
||
| await test.step('step-1: Go to Chart feature test page', async () => { | ||
| await page.goto(`${baseURL}${features[0].path}`); | ||
| await page.waitForLoadState('domcontentloaded'); | ||
| await expect(page).toHaveURL(`${baseURL}${features[0].path}`); | ||
| }); | ||
|
|
||
| await test.step('step-2: Verify chart content/specs', async () => { | ||
| await expect(await chart.chart).toBeVisible(); | ||
| await expect(await chart.title).toContainText(data.titleH3); | ||
| await expect(await chart.subTitle).toContainText(data.subTitle); | ||
| expect(await chart.type.getAttribute('class')).toContain(data.chartType); | ||
| await expect(await chart.footNote).toContainText(data.footNote); | ||
|
|
||
| }); | ||
| }); | ||
|
|
||
| // Test 1 : Chart (bar, border) | ||
| test(`${features[1].name},${features[1].tags}`, async ({ page, baseURL }) => { | ||
| console.info(`[Test Page]: ${baseURL}${features[1].path}`); | ||
| const data = features[1].data; | ||
|
|
||
| await test.step('step-1: Go to Chart feature test page', async () => { | ||
| await page.goto(`${baseURL}${features[1].path}`); | ||
| await page.waitForLoadState('domcontentloaded'); | ||
| await expect(page).toHaveURL(`${baseURL}${features[1].path}`); | ||
| }); | ||
|
|
||
| await test.step('step-2: Verify chart content/specs', async () => { | ||
| await expect(await chart.chart).toBeVisible(); | ||
| await expect(await chart.title).toContainText(data.titleH3); | ||
| await expect(await chart.subTitle).toContainText(data.subTitle); | ||
| expect(await chart.type.getAttribute('class')).toContain(data.chartType); | ||
| await expect(await chart.legendChrome).toBeVisible(); | ||
| await expect(await chart.legendFirefox).toBeVisible(); | ||
| await expect(await chart.legendEdge).toBeVisible(); | ||
|
|
||
| await expect(await chart.footNote).toContainText(data.footNote); | ||
| }); | ||
| }); | ||
|
|
||
| // Test 2 : Chart (column, border) | ||
| test(`${features[2].name},${features[2].tags}`, async ({ page, baseURL }) => { | ||
| console.info(`[Test Page]: ${baseURL}${features[2].path}`); | ||
| const data = features[2].data; | ||
|
|
||
| await test.step('step-1: Go to Chart feature test page', async () => { | ||
| await page.goto(`${baseURL}${features[2].path}`); | ||
| await page.waitForLoadState('domcontentloaded'); | ||
| await expect(page).toHaveURL(`${baseURL}${features[2].path}`); | ||
| }); | ||
|
|
||
| await test.step('step-2: Verify chart content/specs', async () => { | ||
| await expect(await chart.chart).toBeVisible(); | ||
| await expect(await chart.title).toContainText(data.titleH3); | ||
| await expect(await chart.subTitle).toContainText(data.subTitle); | ||
| expect(await chart.type.getAttribute('class')).toContain(data.chartType); | ||
|
|
||
| await expect(await chart.x_axisMonday).toBeVisible(); | ||
| await expect(await chart.x_axisTuesday).toBeVisible(); | ||
| await expect(await chart.x_axisSunday).toBeVisible(); | ||
|
|
||
| await expect(await chart.y_axis100K).toBeVisible(); | ||
| await expect(await chart.y_axis250K).toBeVisible(); | ||
| await expect(await chart.y_axis300K).toBeVisible(); | ||
|
|
||
| await expect(await chart.legendChrome).toBeVisible(); | ||
| await expect(await chart.legendFirefox).toBeVisible(); | ||
| await expect(await chart.legendSafari).toBeVisible(); | ||
|
|
||
| await expect(await chart.footNote).toContainText(data.footNote); | ||
| }); | ||
| }); | ||
|
|
||
| // Test 3 : Chart (donut, border) | ||
| test(`${features[3].name},${features[3].tags}`, async ({ page, baseURL }) => { | ||
| console.info(`[Test Page]: ${baseURL}${features[3].path}`); | ||
| const data = features[3].data; | ||
|
|
||
| await test.step('step-1: Go to Chart feature test page', async () => { | ||
| await page.goto(`${baseURL}${features[3].path}`); | ||
| await page.waitForLoadState('domcontentloaded'); | ||
| await expect(page).toHaveURL(`${baseURL}${features[3].path}`); | ||
| }); | ||
|
|
||
| await test.step('step-2: Verify chart content/specs', async () => { | ||
| await expect(await chart.chart).toBeVisible(); | ||
| await expect(await chart.title).toContainText(data.titleH3); | ||
| await expect(await chart.subTitle).toContainText(data.subTitle); | ||
| expect(await chart.type.getAttribute('class')).toContain(data.chartType); | ||
|
|
||
| await expect(await chart.donutTitle).toBeVisible(); | ||
| await expect(await chart.x_axisMonday).toBeVisible(); | ||
| await expect(await chart.x_axisTuesday).toBeVisible(); | ||
| await expect(await chart.x_axisSunday).toBeVisible(); | ||
|
|
||
| await expect(await chart.footNote).toContainText(data.footNote); | ||
| }); | ||
| }); | ||
|
|
||
| // Test 4 : Chart (line, border) | ||
| test(`${features[4].name},${features[4].tags}`, async ({ page, baseURL }) => { | ||
| console.info(`[Test Page]: ${baseURL}${features[4].path}`); | ||
| const data = features[4].data; | ||
|
|
||
| await test.step('step-1: Go to Chart feature test page', async () => { | ||
| await page.goto(`${baseURL}${features[4].path}`); | ||
| await page.waitForLoadState('domcontentloaded'); | ||
| await expect(page).toHaveURL(`${baseURL}${features[4].path}`); | ||
| }); | ||
|
|
||
| await test.step('step-2: Verify chart content/specs', async () => { | ||
| await expect(await chart.chart).toBeVisible(); | ||
| await expect(await chart.title).toContainText(data.titleH3); | ||
| await expect(await chart.subTitle).toContainText(data.subTitle); | ||
| expect(await chart.type.getAttribute('class')).toContain(data.chartType); | ||
|
|
||
| await expect(await chart.x_axisMonday).toBeVisible(); | ||
| await expect(await chart.x_axisTuesday).toBeVisible(); | ||
| await expect(await chart.x_axisSunday).toBeVisible(); | ||
|
|
||
| await expect(await chart.legendChromeAndroid).toBeVisible(); | ||
| await expect(await chart.legendFirefoxAndroid).toBeVisible(); | ||
| await expect(await chart.legendSafariIos).toBeVisible(); | ||
|
|
||
| await expect(await chart.footNote).toContainText(data.footNote); | ||
| }); | ||
| }); | ||
|
|
||
| // Test 5 : Chart (oversized-number, border) | ||
| test(`${features[5].name},${features[5].tags}`, async ({ page, baseURL }) => { | ||
| console.info(`[Test Page]: ${baseURL}${features[5].path}`); | ||
| const data = features[5].data; | ||
|
|
||
| await test.step('step-1: Go to Chart feature test page', async () => { | ||
| await page.goto(`${baseURL}${features[5].path}`); | ||
| await page.waitForLoadState('domcontentloaded'); | ||
| await expect(page).toHaveURL(`${baseURL}${features[5].path}`); | ||
| }); | ||
|
|
||
| await test.step('step-2: Verify chart content/specs', async () => { | ||
| await expect(await chart.chart).toBeVisible(); | ||
| await expect(await chart.title).toContainText(data.titleH3); | ||
| await expect(await chart.subTitle).toContainText(data.subTitle); | ||
|
|
||
| expect(await chart.type.getAttribute('class')).toContain(data.chartType); | ||
| expect(await chart.svgImg.getAttribute('viewBox')).toContain(chart.attributes['svgViewBox']['viewBox']); | ||
|
|
||
| await expect(await chart.svgImgCircleNumber).toContainText(data.circleNumber); | ||
| await expect(await chart.svgImgCircleSubTitle).toContainText(data.circleSubTitle); | ||
|
|
||
| await expect(await chart.footNote).toContainText(data.footNote); | ||
| }); | ||
| }); | ||
|
|
||
| // Test 6 : Chart (pie, border) | ||
| test(`${features[6].name},${features[6].tags}`, async ({ page, baseURL }) => { | ||
| console.info(`[Test Page]: ${baseURL}${features[6].path}`); | ||
| const data = features[6].data; | ||
|
|
||
| await test.step('step-1: Go to Chart feature test page', async () => { | ||
| await page.goto(`${baseURL}${features[6].path}`); | ||
| await page.waitForLoadState('domcontentloaded'); | ||
| await expect(page).toHaveURL(`${baseURL}${features[6].path}`); | ||
| }); | ||
|
|
||
| await test.step('step-2: Verify chart content/specs', async () => { | ||
| await expect(await chart.chart).toBeVisible(); | ||
| await expect(await chart.title).toContainText(data.titleH3); | ||
| await expect(await chart.subTitle).toContainText(data.subTitle); | ||
|
|
||
| await expect(await chart.pieChartLabelAdobeSign).toBeVisible(); | ||
| await expect(await chart.pieChartLabelAdobePhotoshop).toBeVisible(); | ||
| await expect(await chart.pieChartLabelAdobePremier).toBeVisible(); | ||
|
|
||
| await expect(await chart.legendAdobeAcrobat).toBeVisible(); | ||
| await expect(await chart.legendAdobeExperienceManager).toBeVisible(); | ||
|
|
||
| await expect(await chart.footNote).toContainText(data.footNote); | ||
| }); | ||
| }); | ||
|
|
||
| }); | ||
|
|
||
|
|