test(slider): refactor tests to use beforeEach for page navigation

packages/core/src/components/slider/test/default/darkmode/slider.e2e.ts

@@ -4,8 +4,11 @@ import { expect } from '@playwright/test';
 const componentTestPath = 'src/components/slider/test/default/darkmode/index.html';
 
 test.describe.parallel('tds-slider-default-darkmode', () => {
-  test('renders default slider correctly', async ({ page }) => {
+  test.beforeEach(async ({ page }) => {
     await page.goto(componentTestPath);
+  });
+
+  test('renders default slider correctly', async ({ page }) => {
     const slider = page.locator('tds-slider');
     await expect(slider).toHaveCount(1);
 

packages/core/src/components/slider/test/default/lightmode/slider.e2e.ts

@@ -4,8 +4,11 @@ import { expect } from '@playwright/test';
 const componentTestPath = 'src/components/slider/test/default/lightmode/index.html';
 
 test.describe.parallel('tds-slider-default-lightmode', () => {
-  test('renders default slider correctly', async ({ page }) => {
+  test.beforeEach(async ({ page }) => {
     await page.goto(componentTestPath);
+  });
+
+  test('renders default slider correctly', async ({ page }) => {
     const slider = page.locator('tds-slider');
     await expect(slider).toHaveCount(1);
 
@@ -14,13 +17,11 @@ test.describe.parallel('tds-slider-default-lightmode', () => {
   });
 
   test('value is set to 50', async ({ page }) => {
-    await page.goto(componentTestPath);
     const sliderValue = page.locator('.tds-slider__value');
     await expect(sliderValue).toHaveText('50');
   });
 
   test('min value is set to 0', async ({ page }) => {
-    await page.goto(componentTestPath);
     /* Find thumb and pull it towards a left and check if min value is 0 */
     await page.locator('.tds-slider__thumb-inner').hover();
     await page.mouse.down();
@@ -33,7 +34,6 @@ test.describe.parallel('tds-slider-default-lightmode', () => {
   });
 
   test('max value is set to 100', async ({ page }) => {
-    await page.goto(componentTestPath);
     /* Find thumb and pull it towards a right and check if min value is 0 */
     await page.locator('.tds-slider__thumb-inner').hover();
     await page.mouse.down();
@@ -46,15 +46,12 @@ test.describe.parallel('tds-slider-default-lightmode', () => {
   });
 
   test('label is hidden', async ({ page }) => {
-    await page.goto(componentTestPath);
     const slider = page.locator('tds-slider');
     const sliderLabel = slider.locator('label');
     await expect(sliderLabel).toHaveText('');
   });
 
   test('slider is not read only or disabled', async ({ page }) => {
-    await page.goto(componentTestPath);
-
     /* Find thumb and pull it towards a left and check if value in thumb is changing */
     await page.locator('.tds-slider__thumb-inner').hover();
     await page.mouse.down();
@@ -67,7 +64,6 @@ test.describe.parallel('tds-slider-default-lightmode', () => {
   });
 
   test('thumb is size large', async ({ page }) => {
-    await page.goto(componentTestPath);
     const sliderThumb = page.locator('.tds-slider__thumb-inner');
     const sliderThumbWidth = await sliderThumb.evaluate((style) => getComputedStyle(style).width);
     const sliderThumbHeight = await sliderThumb.evaluate((style) => getComputedStyle(style).height);

packages/core/src/components/slider/test/disabled/slider.e2e.ts

@@ -2,15 +2,18 @@ import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
 
 const componentTestPath = 'src/components/slider/test/disabled/index.html';
+
 test.describe.parallel('tds-slider-disabled', () => {
-  test('read-only is false', async ({ page }) => {
+  test.beforeEach(async ({ page }) => {
     await page.goto(componentTestPath);
+  });
+
+  test('read-only is false', async ({ page }) => {
     const slider = page.locator('tds-slider');
     await expect(slider).not.toHaveAttribute('read-only');
   });
 
   test('slider is disabled', async ({ page }) => {
-    await page.goto(componentTestPath);
     const slider = page.locator('tds-slider input');
     const sliderThumb = page.locator('.tds-slider__thumb');
     const sliderCursorStyle = await sliderThumb.evaluate((style) => getComputedStyle(style).cursor);
@@ -21,7 +24,6 @@ test.describe.parallel('tds-slider-disabled', () => {
   });
 
   test('slider can not be clicked on', async ({ page }) => {
-    await page.goto(componentTestPath);
     const sliderThumb = page.locator('.tds-slider__thumb-inner');
     const sliderPointerEvents = await sliderThumb.evaluate(
       (style) => getComputedStyle(style).pointerEvents,

packages/core/src/components/slider/test/read-only/slider.e2e.ts

@@ -2,15 +2,18 @@ import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
 
 const componentTestPath = 'src/components/slider/test/read-only/index.html';
+
 test.describe.parallel('tds-slider-read-only', () => {
-  test('read-only is true', async ({ page }) => {
+  test.beforeEach(async ({ page }) => {
     await page.goto(componentTestPath);
+  });
+
+  test('read-only is true', async ({ page }) => {
     const slider = page.locator('tds-slider');
     await expect(slider).toHaveAttribute('read-only');
   });
 
   test('is not disabled', async ({ page }) => {
-    await page.goto(componentTestPath);
     const sliderThumb = page.locator('.tds-slider__thumb-inner');
     const sliderCursorStyle = await sliderThumb.evaluate((style) => getComputedStyle(style).cursor);
     expect(sliderCursorStyle).toBe('pointer');
@@ -19,7 +22,6 @@ test.describe.parallel('tds-slider-read-only', () => {
   });
 
   test('slider can not be clicked on', async ({ page }) => {
-    await page.goto(componentTestPath);
     const sliderThumb = page.locator('.tds-slider__thumb-inner');
     const sliderThumbStyle = await sliderThumb.evaluate(
       (style) => getComputedStyle(style).pointerEvents,