(HDS-2610) Add ref to Select, fix Playwright broken due to mismatched…

… Ubuntu versions in Docker vs. CI

.github/pull_request_template.md

@@ -24,5 +24,5 @@ Links to demos are in the comments
 
 ## Add to changelog
 
-- [ ] Added needed line to changelog
+- [] Added needed line to changelog
 <!-- Or comment here why it is not relevant in the change log -->

.github/workflows/e2e-tests.yml

@@ -7,7 +7,7 @@ on:
 
 jobs:
   e2e-test:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04
 
     steps:
       - name: Checkout code

CHANGELOG.md

@@ -16,6 +16,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 #### Added
 
 - [Component] What is added?
+- [Select] Add ref prop to be able to for example focus the element programmatically
 
 #### Changed
 

e2e/README.md

@@ -64,5 +64,6 @@ This script will update the snapshot files used in the tests.
 - Do not run the scripts in `package.json` locally since the screenshots will most likely differ from the ones created in CI and will cause the tests to fail.
 
 - If you need to update Playwright version in the project, you need to match the versions in `package.json`'s `devDependencies` and the docker scripts (used Docker images).
+  - And be EXTRA careful with it since the used Playwright Docker image might have different version of Ubuntu than what's running in CI (Github actions). So make sure that the GA workflow (`.github/workflows/e2e-test.yml`) has the same Ubuntu version than what the Playwright Docker image has! This is why the GA-workflow doesn't have `ubuntu-latest` because it will start failing eventually due to version-mismatch.
 
 For further assistance, refer to the project documentation or contact the development team.

e2e/docker/run.sh

@@ -22,4 +22,4 @@ if [ -n "$PACKAGE" ] && [ -n "$COMPONENT" ]; then
     COMMAND="PACKAGE=${PACKAGE} COMPONENT=${COMPONENT} yarn start-component"
 fi
 
-docker run -v ${HDS_ROOT_DIR}:/${HDS_DIR_BASENAME} -it --rm --ipc=host mcr.microsoft.com/playwright:v1.48.2-jammy /bin/bash -c "cd /${HDS_DIR_BASENAME}/e2e && ${COMMAND}"
+docker run -v ${HDS_ROOT_DIR}:/${HDS_DIR_BASENAME} -it --rm --ipc=host mcr.microsoft.com/playwright:v1.49.1-noble /bin/bash -c "cd /${HDS_DIR_BASENAME}/e2e && ${COMMAND}"

e2e/docker/update-snapshots.sh

@@ -22,4 +22,4 @@ if [ -n "$PACKAGE" ] && [ -n "$COMPONENT" ]; then
     COMMAND="PACKAGE=${PACKAGE} COMPONENT=${COMPONENT} yarn update-snapshots-component"
 fi
 
-docker run -v ${HDS_ROOT_DIR}:/${HDS_DIR_BASENAME} -it --rm --ipc=host mcr.microsoft.com/playwright:v1.48.2-jammy /bin/bash -c "cd /${HDS_DIR_BASENAME}/e2e && ${COMMAND}"
+docker run -v ${HDS_ROOT_DIR}:/${HDS_DIR_BASENAME} -it --rm --ipc=host mcr.microsoft.com/playwright:v1.49.1-noble /bin/bash -c "cd /${HDS_DIR_BASENAME}/e2e && ${COMMAND}"

e2e/package.json

@@ -16,7 +16,7 @@
     "update-snapshots": "npx playwright test --update-snapshots"
   },
   "devDependencies": {
-    "@playwright/test": "^1.48.2",
+    "@playwright/test": "1.49.1",
     "http-server": "^14.1.1"
   }
 }

e2e/playwright.config.js

@@ -50,17 +50,21 @@ export default defineConfig({
       testMatch: [/tests/],
       use: {
         ...devices['Desktop Chrome'],
+        channel: 'chromium',
+        args: ['--no-sandbox'],
         viewport: { width: 1280, height: 720 },
-        isMobile: false,
+        hasTouch: false,
       },
     },
     {
       name: 'Mobile',
       testMatch: [/tests/],
       use: {
         ...devices['Desktop Chrome'],
+        channel: 'chromium',
+        args: ['--no-sandbox'],
         viewport: { width: 320, height: 576 },
-        isMobile: true,
+        hasTouch: true,
       },
     },
   ],

e2e/tests/core/components/core-breadcrumb-spec.ts

@@ -5,7 +5,7 @@ const storybook = 'core';
 const takeStateSnapshots = true;
 
 test.describe(`Testing ${storybook} component "${componentName}"`, () => {
-  test('Take snapshots of all stories', async ({ page, isMobile }) => {
-    await takeAllStorySnapshots({ page, isMobile, takeStateSnapshots, storybook, componentName });
+  test('Take snapshots of all stories', async ({ page, hasTouch }) => {
+    await takeAllStorySnapshots({ page, hasTouch, takeStateSnapshots, storybook, componentName });
   });
 });

e2e/tests/core/components/core-button-spec.ts

@@ -6,7 +6,7 @@ const storybook = 'core';
 const takeStateSnapshots = true;
 
 test.describe(`Testing ${storybook} component "${componentName}"`, () => {
-  test('Take snapshots of all stories', async ({ page, isMobile }) => {
-    await takeAllStorySnapshots({ page, isMobile, takeStateSnapshots, storybook, componentName });
+  test('Take snapshots of all stories', async ({ page, hasTouch }) => {
+    await takeAllStorySnapshots({ page, hasTouch, takeStateSnapshots, storybook, componentName });
   });
 });

e2e/tests/core/components/core-checkbox-spec.ts

@@ -6,7 +6,7 @@ const storybook = 'core';
 const takeStateSnapshots = true;
 
 test.describe(`Testing ${storybook} component "${componentName}"`, () => {
-  test('Take snapshots of all stories', async ({ page, isMobile }) => {
-    await takeAllStorySnapshots({ page, isMobile, takeStateSnapshots, storybook, componentName });
+  test('Take snapshots of all stories', async ({ page, hasTouch }) => {
+    await takeAllStorySnapshots({ page, hasTouch, takeStateSnapshots, storybook, componentName });
   });
 });

e2e/tests/core/components/core-hero-spec.ts

@@ -6,7 +6,7 @@ const storybook = 'core';
 const takeStateSnapshots = false;
 
 test.describe(`Testing ${storybook} component "${componentName}"`, () => {
-  test('Take snapshots of all stories', async ({ page, isMobile }) => {
-    await takeAllStorySnapshots({ page, isMobile, takeStateSnapshots, storybook, componentName });
+  test('Take snapshots of all stories', async ({ page, hasTouch }) => {
+    await takeAllStorySnapshots({ page, hasTouch, takeStateSnapshots, storybook, componentName });
   });
 });

e2e/tests/core/components/core-koros-spec.ts

@@ -6,7 +6,7 @@ const storybook = 'core';
 const takeStateSnapshots = false;
 
 test.describe(`Testing ${storybook} component "${componentName}"`, () => {
-  test('Take snapshots of all stories', async ({ page, isMobile }) => {
-    await takeAllStorySnapshots({ page, isMobile, takeStateSnapshots, storybook, componentName });
+  test('Take snapshots of all stories', async ({ page, hasTouch }) => {
+    await takeAllStorySnapshots({ page, hasTouch, takeStateSnapshots, storybook, componentName });
   });
 });

e2e/tests/core/components/core-notification-spec.ts

@@ -6,7 +6,7 @@ const storybook = 'core';
 const takeStateSnapshots = true;
 
 test.describe(`Testing ${storybook} component "${componentName}"`, () => {
-  test('Take snapshots of all stories', async ({ page, isMobile }) => {
-    await takeAllStorySnapshots({ page, isMobile, takeStateSnapshots, storybook, componentName });
+  test('Take snapshots of all stories', async ({ page, hasTouch }) => {
+    await takeAllStorySnapshots({ page, hasTouch, takeStateSnapshots, storybook, componentName });
   });
 });

e2e/tests/core/components/core-number-input-spec.ts

@@ -6,7 +6,7 @@ const storybook = 'core';
 const takeStateSnapshots = true;
 
 test.describe(`Testing ${storybook} component "${componentName}"`, () => {
-  test('Take snapshots of all stories', async ({ page, isMobile }) => {
-    await takeAllStorySnapshots({ page, isMobile, takeStateSnapshots, storybook, componentName });
+  test('Take snapshots of all stories', async ({ page, hasTouch }) => {
+    await takeAllStorySnapshots({ page, hasTouch, takeStateSnapshots, storybook, componentName });
   });
 });

e2e/tests/core/components/core-password-input-spec.ts

@@ -6,7 +6,7 @@ const storybook = 'core';
 const takeStateSnapshots = true;
 
 test.describe(`Testing ${storybook} component "${componentName}"`, () => {
-  test('Take snapshots of all stories', async ({ page, isMobile }) => {
-    await takeAllStorySnapshots({ page, isMobile, takeStateSnapshots, storybook, componentName });
+  test('Take snapshots of all stories', async ({ page, hasTouch }) => {
+    await takeAllStorySnapshots({ page, hasTouch, takeStateSnapshots, storybook, componentName });
   });
 });

e2e/tests/core/components/core-phone-input-spec.ts

@@ -6,7 +6,7 @@ const storybook = 'core';
 const takeStateSnapshots = true;
 
 test.describe(`Testing ${storybook} component "${componentName}"`, () => {
-  test('Take snapshots of all stories', async ({ page, isMobile }) => {
-    await takeAllStorySnapshots({ page, isMobile, takeStateSnapshots, storybook, componentName });
+  test('Take snapshots of all stories', async ({ page, hasTouch }) => {
+    await takeAllStorySnapshots({ page, hasTouch, takeStateSnapshots, storybook, componentName });
   });
 });

e2e/tests/core/components/core-search-input-spec.ts

@@ -6,7 +6,7 @@ const storybook = 'core';
 const takeStateSnapshots = true;
 
 test.describe(`Testing ${storybook} component "${componentName}"`, () => {
-  test('Take snapshots of all stories', async ({ page, isMobile }) => {
-    await takeAllStorySnapshots({ page, isMobile, takeStateSnapshots, storybook, componentName });
+  test('Take snapshots of all stories', async ({ page, hasTouch }) => {
+    await takeAllStorySnapshots({ page, hasTouch, takeStateSnapshots, storybook, componentName });
   });
 });

e2e/tests/core/components/core-selection-group-spec.ts

@@ -6,7 +6,7 @@ const storybook = 'core';
 const takeStateSnapshots = false;
 
 test.describe(`Testing ${storybook} component "${componentName}"`, () => {
-  test('Take snapshots of all stories', async ({ page, isMobile }) => {
-    await takeAllStorySnapshots({ page, isMobile, takeStateSnapshots, storybook, componentName });
+  test('Take snapshots of all stories', async ({ page, hasTouch }) => {
+    await takeAllStorySnapshots({ page, hasTouch, takeStateSnapshots, storybook, componentName });
   });
 });

e2e/tests/core/components/core-table-spec.ts

@@ -6,7 +6,7 @@ const storybook = 'core';
 const takeStateSnapshots = false;
 
 test.describe(`Testing ${storybook} component "${componentName}"`, () => {
-  test('Take snapshots of all stories', async ({ page, isMobile }) => {
-    await takeAllStorySnapshots({ page, isMobile, takeStateSnapshots, storybook, componentName });
+  test('Take snapshots of all stories', async ({ page, hasTouch }) => {
+    await takeAllStorySnapshots({ page, hasTouch, takeStateSnapshots, storybook, componentName });
   });
 });