-
Notifications
You must be signed in to change notification settings - Fork 100
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(functional): Add new visual regression tests (#846)
* feat(functional): Add visual regression tests using latest deploys fix: update workflows yml * tests: update screenshots for CI runs * feat(functional): Add visual regression tests using latest deploys * fix: Update tests * chore: add VR fixes --------- Co-authored-by: Chancellor Clark <[email protected]>
- Loading branch information
1 parent
85c56cb
commit e2f4311
Showing
162 changed files
with
595 additions
and
840 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,5 @@ | ||
--- | ||
"@bigcommerce/catalyst-core": patch | ||
--- | ||
|
||
Migrate visual regression tests |
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
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
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
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
This file was deleted.
Oops, something went wrong.
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,13 @@ | ||
export default { | ||
SHOP_ALL: '/shop-all', | ||
SAMPLE_ABLE_BREWING_SYSTEM: '/sample-able-brewing-system', | ||
ORBIT_TERRARIUM_LARGE: '/orbit-terrarium-large', | ||
BLOG: '/blog', | ||
BATH_LUXURY: '/bath/towels/luxury', | ||
QUICK_ADD_77: '/shop-all/?showQuickAdd=77', | ||
QUICK_ADD_93: '/?showQuickAdd=93', | ||
CONTACT_US: '/contact-us', | ||
LOGIN: '/login', | ||
FOG_LINEN_CHAMBRAY: '/fog-linen-chambray-towel-beige-stripe/', | ||
PARFAIT_JAR: '/1-l-le-parfait-jar', | ||
}; |
31 changes: 31 additions & 0 deletions
31
apps/core/tests/visual-regression/components/accordion.spec.ts
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,31 @@ | ||
import { expect, test } from '@playwright/test'; | ||
|
||
import routes from '~/tests/routes'; | ||
|
||
test('accordion expanded', async ({ page }) => { | ||
// Arrange | ||
await page.goto(routes.SHOP_ALL); | ||
|
||
// Act | ||
const accordion = page | ||
.locator('div[data-state="open"]') | ||
.filter({ has: page.getByRole('button', { name: 'Brand', expanded: true }) }); | ||
|
||
// Assert | ||
await expect(accordion).toHaveScreenshot(); | ||
}); | ||
|
||
test('accordion closed', async ({ page }) => { | ||
// Arrange | ||
await page.goto(routes.SHOP_ALL); | ||
|
||
// Act | ||
await page.getByRole('button', { name: 'Brand', expanded: true }).click(); | ||
|
||
const accordion = page | ||
.locator('div[data-state="closed"]') | ||
.filter({ has: page.getByRole('button', { name: 'Brand', expanded: false }) }); | ||
|
||
// Assert | ||
await expect(accordion).toHaveScreenshot(); | ||
}); |
Binary file added
BIN
+1.43 KB
...onents/accordion.spec.ts-snapshots/accordion-closed-1-tests-chromium-darwin.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+7.13 KB
...ents/accordion.spec.ts-snapshots/accordion-expanded-1-tests-chromium-darwin.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
24 changes: 24 additions & 0 deletions
24
apps/core/tests/visual-regression/components/badge.spec.ts
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,24 @@ | ||
import { expect, test } from '@playwright/test'; | ||
|
||
import routes from '~/tests/routes'; | ||
|
||
test('badge with icon', async ({ page }) => { | ||
// Arrange | ||
await page.goto(routes.SAMPLE_ABLE_BREWING_SYSTEM); | ||
await page.getByRole('heading', { level: 1, name: '[Sample] Able Brewing System' }).waitFor(); | ||
await page.getByRole('button', { name: 'Add to Cart' }).click(); | ||
|
||
const addToCartNotification = page | ||
.getByRole('status') | ||
.filter({ hasText: 'Item added to your cart' }); | ||
|
||
// Wait for the add to cart notification to appear and disappear | ||
await addToCartNotification.waitFor(); | ||
await addToCartNotification.waitFor({ state: 'detached' }); | ||
|
||
// Act | ||
const badge = page.getByRole('link', { name: 'Cart Items 1' }); | ||
|
||
// Assert | ||
await expect(badge).toHaveScreenshot(); | ||
}); |
Binary file added
BIN
+795 Bytes
.../components/badge.spec.ts-snapshots/badge-with-icon-1-tests-chromium-darwin.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
15 changes: 15 additions & 0 deletions
15
apps/core/tests/visual-regression/components/blog-post-card.spec.ts
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,15 @@ | ||
import { expect, test } from '@playwright/test'; | ||
|
||
import routes from '~/tests/routes'; | ||
|
||
test('blog post card', async ({ page }) => { | ||
// Arrange | ||
await page.goto(routes.BLOG); | ||
await page.getByRole('heading', { name: 'Blog', exact: true }).waitFor(); | ||
|
||
// Act | ||
const blogPostCard = page.getByRole('listitem').filter({ hasText: 'Your first blog post!' }); | ||
|
||
// Assert | ||
await expect(blogPostCard).toHaveScreenshot(); | ||
}); |
Binary file added
BIN
+28.4 KB
...nts/blog-post-card.spec.ts-snapshots/blog-post-card-1-tests-chromium-darwin.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
16 changes: 16 additions & 0 deletions
16
apps/core/tests/visual-regression/components/breadcrumbs.spec.ts
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,16 @@ | ||
import { expect, test } from '@playwright/test'; | ||
|
||
import routes from '~/tests/routes'; | ||
|
||
test('breadcrumbs', async ({ page }) => { | ||
// Arrange | ||
await page.goto(routes.BATH_LUXURY); | ||
|
||
// Act | ||
const breadcrumb = page.getByLabel('Breadcrumb'); | ||
|
||
await breadcrumb.waitFor(); | ||
|
||
// Assert | ||
await expect(breadcrumb).toHaveScreenshot(); | ||
}); |
Binary file added
BIN
+2.92 KB
...onents/breadcrumbs.spec.ts-snapshots/blog-post-card-1-tests-chromium-darwin.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+2.92 KB
...omponents/breadcrumbs.spec.ts-snapshots/breadcrumbs-1-tests-chromium-darwin.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
42 changes: 42 additions & 0 deletions
42
apps/core/tests/visual-regression/components/button.spec.ts
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,42 @@ | ||
import { expect, test } from '@playwright/test'; | ||
|
||
import routes from '~/tests/routes'; | ||
|
||
test('Primary button', async ({ page }) => { | ||
// Arrange | ||
await page.goto(routes.ORBIT_TERRARIUM_LARGE); | ||
|
||
// Act | ||
const button = page.getByRole('button', { name: 'Add to cart' }); | ||
|
||
await button.waitFor(); | ||
|
||
// Assert | ||
await expect(button).toHaveScreenshot(); | ||
}); | ||
|
||
test('Secondary button', async ({ page }) => { | ||
// Arrange | ||
await page.goto(routes.SHOP_ALL); | ||
|
||
const button = page.getByRole('button', { name: 'Update price' }); | ||
|
||
await button.waitFor(); | ||
|
||
// Assert | ||
await expect(button).toHaveScreenshot(); | ||
}); | ||
|
||
test('As a child', async ({ page }) => { | ||
// Arrange | ||
await page.goto(routes.SAMPLE_ABLE_BREWING_SYSTEM); | ||
await page.getByRole('heading', { level: 1, name: '[Sample] Able Brewing System' }).waitFor(); | ||
|
||
// Act | ||
await page.getByRole('button', { name: 'Add to Cart' }).first().click(); | ||
await page.getByRole('link', { name: 'Cart Items 1' }).click(); | ||
await page.getByText('Shipping cost').waitFor(); | ||
|
||
// Assert | ||
await expect(page.getByRole('button', { name: 'Add' }).first()).toHaveScreenshot(); | ||
}); |
Binary file added
BIN
+866 Bytes
...sion/components/button.spec.ts-snapshots/As-a-child-1-tests-chromium-darwin.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+2.22 KB
.../components/button.spec.ts-snapshots/Primary-button-1-tests-chromium-darwin.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+2.31 KB
...omponents/button.spec.ts-snapshots/Secondary-button-1-tests-chromium-darwin.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
13 changes: 13 additions & 0 deletions
13
apps/core/tests/visual-regression/components/carousel.spec.ts
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,13 @@ | ||
import { expect, test } from '@playwright/test'; | ||
|
||
test('Carousel', async ({ page }) => { | ||
// Arrange | ||
await page.goto('/'); | ||
await page.waitForLoadState('networkidle'); | ||
|
||
// Act | ||
const slides = page.getByRole('region', { name: 'Featured products' }); | ||
|
||
// Assert | ||
await expect(slides).toHaveScreenshot(); | ||
}); |
Binary file added
BIN
+224 KB
...sion/components/carousel.spec.ts-snapshots/Carousel-1-tests-chromium-darwin.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
28 changes: 28 additions & 0 deletions
28
apps/core/tests/visual-regression/components/checkbox.spec.ts
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,28 @@ | ||
import { expect, test } from '@playwright/test'; | ||
|
||
import routes from '~/tests/routes'; | ||
|
||
// eslint-disable-next-line @typescript-eslint/no-empty-function | ||
test.skip('Disabled checkbox', async () => {}); | ||
|
||
// eslint-disable-next-line @typescript-eslint/no-empty-function | ||
test.skip('Disabled checked checkbox', async () => {}); | ||
|
||
// eslint-disable-next-line @typescript-eslint/no-empty-function | ||
test.skip('Checkbox with error variant', async () => {}); | ||
|
||
test('Checked checkbox with label', async ({ page }) => { | ||
// Arrange | ||
await page.goto(routes.SHOP_ALL); | ||
|
||
// Act | ||
const checkbox = page.getByLabel('Common Good1 products'); | ||
|
||
await checkbox.click(); | ||
|
||
// Assert | ||
await expect(checkbox).toHaveScreenshot(); | ||
}); | ||
|
||
// eslint-disable-next-line @typescript-eslint/no-empty-function | ||
test.skip('Checkbox with custom icon', async () => {}); |
Binary file added
BIN
+222 Bytes
...ckbox.spec.ts-snapshots/Checked-checkbox-with-label-1-tests-chromium-darwin.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
16 changes: 16 additions & 0 deletions
16
apps/core/tests/visual-regression/components/counter.spec.ts
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,16 @@ | ||
import { expect, test } from '@playwright/test'; | ||
|
||
import routes from '~/tests/routes'; | ||
|
||
test('Counter default', async ({ page }) => { | ||
// Arrange | ||
await page.goto(routes.QUICK_ADD_77); | ||
|
||
// Act | ||
const spinButton = page.getByRole('spinbutton', { name: 'Number' }); | ||
|
||
await spinButton.waitFor(); | ||
|
||
// Assert | ||
await expect(spinButton).toHaveScreenshot(); | ||
}); |
Binary file added
BIN
+507 Bytes
...omponents/counter.spec.ts-snapshots/Counter-default-1-tests-chromium-darwin.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
16 changes: 16 additions & 0 deletions
16
apps/core/tests/visual-regression/components/datepicker.spec.ts
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,16 @@ | ||
import { expect, test } from '@playwright/test'; | ||
|
||
import routes from '~/tests/routes'; | ||
|
||
test('Date picker', async ({ page }) => { | ||
// Arrange | ||
await page.goto(routes.QUICK_ADD_77); | ||
|
||
// Act | ||
const datePicker = page.getByRole('dialog').getByPlaceholder('MM/DD/YYYY'); | ||
|
||
await datePicker.waitFor(); | ||
|
||
// Assert | ||
await expect(datePicker).toHaveScreenshot(); | ||
}); |
Binary file added
BIN
+2.45 KB
...components/datepicker.spec.ts-snapshots/Date-picker-1-tests-chromium-darwin.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
14 changes: 14 additions & 0 deletions
14
apps/core/tests/visual-regression/components/footer.spec.ts
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,14 @@ | ||
import { expect, test } from '@playwright/test'; | ||
|
||
test('Footer', async ({ page }) => { | ||
// Arrange | ||
await page.goto('/'); | ||
|
||
// Act | ||
const footer = page.locator('section').filter({ hasText: 'CategoriesShop' }); | ||
|
||
await footer.waitFor(); | ||
|
||
// Assert | ||
await expect(footer).toHaveScreenshot(); | ||
}); |
Binary file added
BIN
+39.2 KB
...gression/components/footer.spec.ts-snapshots/Footer-1-tests-chromium-darwin.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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,16 @@ | ||
import { expect, test } from '@playwright/test'; | ||
|
||
import routes from '~/tests/routes'; | ||
|
||
test('Form', async ({ page }) => { | ||
// Arrange | ||
await page.goto(routes.CONTACT_US); | ||
|
||
// Act | ||
const form = page.getByRole('heading', { name: 'Contact Us' }); | ||
|
||
await form.waitFor(); | ||
|
||
// Assert | ||
await expect(form.locator('..').locator('..')).toHaveScreenshot(); | ||
}); |
Binary file added
BIN
+28.8 KB
...l-regression/components/form.spec.ts-snapshots/Form-1-tests-chromium-darwin.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
29 changes: 29 additions & 0 deletions
29
apps/core/tests/visual-regression/components/gallery.spec.ts
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,29 @@ | ||
import { expect, test } from '@playwright/test'; | ||
|
||
import routes from '~/tests/routes'; | ||
|
||
test('Gallery image', async ({ page }) => { | ||
// Arrange | ||
await page.goto(routes.SAMPLE_ABLE_BREWING_SYSTEM); | ||
|
||
// Act | ||
const gallery = page.getByRole('figure').locator('img'); | ||
|
||
await gallery.waitFor(); | ||
|
||
// Assert | ||
await expect(gallery).toHaveScreenshot(); | ||
}); | ||
|
||
test('Gallery thumbnail image', async ({ page }) => { | ||
// Arrange | ||
await page.goto(routes.SAMPLE_ABLE_BREWING_SYSTEM); | ||
|
||
// Act | ||
const thumbnail = page.getByLabel('Thumbnail navigation'); | ||
|
||
await thumbnail.waitFor(); | ||
|
||
// Assert | ||
await expect(page.getByLabel('Thumbnail navigation')).toHaveScreenshot(); | ||
}); |
Binary file added
BIN
+113 KB
.../components/gallery.spec.ts-snapshots/Gallery-image-1-tests-chromium-darwin.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+48.8 KB
...s/gallery.spec.ts-snapshots/Gallery-thumbnail-image-1-tests-chromium-darwin.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Oops, something went wrong.