Bump to Selenium 4 and Chrome 107 (#4540)

* Bump to Selenium 4 and Chrome 107

* Fix screenshots

* Fix screenshots

* Fix screenshots

* Fix screenshots

* Fix screenshots

* Fix screenshots

* Fix screenshots

* Fix screenshots

* Fix screenshots

* Fix screenshots

* Fix screenshots

* Fix screenshots

* Fix screenshots

* Fix screenshots

* Fix screenshots

* Fix screenshots

* Fix screenshots

* Fix screenshots

* Fix screenshots and test

* Fix screenshots

* Fix screenshots

* Fix screenshots

* Fix screenshots

* Fix flaky tests

* Clean up

* Upload in Docker

* Add entry

CHANGELOG.md

@@ -22,6 +22,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Changed
+
+-  Updated test harness to use [Selenium Hub 4.6.0](https://hub.docker.com/r/selenium/hub) and [Chrome 107](https://hub.docker.com/r/selenium/node-chrome), by [@compulim](https://github.com/compulim) in PR [#4540](https://github.com/microsoft/BotFramework-WebChat/pull/4540)
+
 ## [4.15.6] - 2022-12-01
 
 ### Fixed

__tests__/html/accessibility.adaptiveCard.disabled.focus.withShowCard.html

@@ -140,6 +140,7 @@
         await host.sendKeys('ENTER');
 
         // THEN: It should expand the card and the "Submit" button should be shown.
+        //       It should continue to focus on the "Set ZIP code" button.
         expect(document.querySelector('button[title="Submit"]')).toBeTruthy();
         await host.snapshot();
 
@@ -179,13 +180,15 @@
         // WHEN: Pressing TAB key again.
         await host.sendKeys('TAB');
 
-        // THEN: It should still focus on the "Set ZIP code" button.
+        // THEN: It should continue to focus on the "Set ZIP code" button.
         expect(document.activeElement).toBe(document.querySelector('button[title="Set ZIP code"]'));
 
         // WHEN: Pressing ENTER key while to focus is on "Set ZIP code".
         await host.sendKeys('ENTER');
 
-        // THEN: It should hide the attached panel.
+        // THEN: It should hide te attached panel.
+        //       It should continue to focus on the "Set ZIP code" button.
+        //       The "Skip" button should be disabled.
         expect(document.querySelector('button[title="Submit"]')).toBeFalsy();
         await host.snapshot();
 

__tests__/html/accessibility.adaptiveCard.disabled.inputs.html

@@ -125,6 +125,7 @@
           await pageConditions.scrollToBottomCompleted();
 
           // THEN: The bottom part should show, because the "Show Card" button is not disabled and could be clicked.
+          //       No focus indicator should show on the "Show Card" button as it is clicked by mouse.
           await host.snapshot();
 
           // THEN: All buttons should be disabled.

__tests__/html/accessibility.liveRegionAttachment.adaptiveCard.html

@@ -54,6 +54,13 @@
         await pageConditions.scrollToBottomCompleted();
         await pageConditions.liveRegionStabilized();
 
+        // Chrome 107 bug:
+        // - Even though it scrolled to the bottom: clientHeight + scrollTop = scrollHeight, or 124 + 815 = 939.
+        //   It is not scrolled to the bottom.
+        //   We need to artifically set `scrollTop++` again to force it to scroll down.
+
+        pageElements.transcriptScrollable().scrollTop++;
+
         await pageObjects.verifyDOMIntegrity();
         await pageObjects.focusSendBoxTextBox();
 

__tests__/html/transcript.activityGrouping.js

@@ -221,6 +221,8 @@ describe('transcript', () => {
       'transcript.activityGrouping#wd=1&bi=1&bn=1&bt=1&g=status&l=0&rtl=0&t=markdown-message.json&ui=1&un=1&ut=1&w=1&ch=1280&cw=720'
     ));
 
+  // Test 45 is slightly (3px) shifted to the right.
+  // This is because the carousel tries to center the first image, which result in setting scrollLeft to 3.3px.
   test('with activity grouping test 45', () =>
     runHTML(
       'transcript.activityGrouping#wd=1&bi=1&bn=1&bt=1&g=status&l=carousel&rtl=0&t=markdown-message.json&ui=1&un=1&ut=1&w=0&ch=1280'

__tests__/html/transcript.navigation.scrollIntoView.mouse.html

@@ -98,6 +98,11 @@
         // THEN: It should scroll the second activity into view.
         await pageConditions.scrollStabilized();
         await pageConditions.focusedActivityInView();
+
+        // THEN: It should scroll activity #2 in the view and align it to the top.
+        expect(pageElements.transcriptScrollable().scrollTop).toBe(
+          pageElements.activities()[1].offsetTop - 5 // 5px is the margin
+        );
         await host.snapshot();
       });
     </script>

__tests__/input.js

@@ -14,6 +14,8 @@ const styleOptions = { sendBoxTextWrap: true };
 test('textarea input scroll', async () => {
   const { driver } = await setupWebDriver({ props: { styleOptions } });
 
+  await driver.wait(uiConnected(), timeouts.directLine);
+
   const textarea = await driver.findElement(By.tagName('textarea'));
 
   await textarea.sendKeys(
@@ -28,6 +30,8 @@ test('textarea input scroll', async () => {
 test('textarea input resize after delete', async () => {
   const { driver } = await setupWebDriver({ props: { styleOptions } });
 
+  await driver.wait(uiConnected(), timeouts.directLine);
+
   const textarea = await driver.findElement(By.tagName('textarea'));
 
   await textarea.sendKeys(
@@ -43,6 +47,8 @@ test('textarea input resize after delete', async () => {
 test('textarea input with whitespace', async () => {
   const { driver } = await setupWebDriver({ props: { styleOptions } });
 
+  await driver.wait(uiConnected(), timeouts.directLine);
+
   const textarea = await driver.findElement(By.tagName('textarea'));
 
   await textarea.sendKeys(
@@ -57,6 +63,8 @@ test('textarea input with whitespace', async () => {
 test('textarea input shift enter', async () => {
   const { driver } = await setupWebDriver({ props: { styleOptions } });
 
+  await driver.wait(uiConnected(), timeouts.directLine);
+
   const textarea = await driver.findElement(By.tagName('textarea'));
 
   await textarea.sendKeys('Lorem ipsum dolor sit amet, consectetur adipiscing elit,');
@@ -71,6 +79,8 @@ test('textarea input shift enter', async () => {
 test('textarea input multiple lines', async () => {
   const { driver } = await setupWebDriver({ props: { styleOptions } });
 
+  await driver.wait(uiConnected(), timeouts.directLine);
+
   const textarea = await driver.findElement(By.tagName('textarea'));
 
   await textarea.sendKeys(
@@ -85,6 +95,8 @@ test('textarea input multiple lines', async () => {
 test('textarea send on enter', async () => {
   const { driver } = await setupWebDriver({ props: { styleOptions } });
 
+  await driver.wait(uiConnected(), timeouts.directLine);
+
   const textarea = await driver.findElement(By.tagName('textarea'));
 
   await textarea.sendKeys(
@@ -102,6 +114,8 @@ test('textarea send on enter', async () => {
 test('textarea long text', async () => {
   const { driver } = await setupWebDriver({ props: { styleOptions } });
 
+  await driver.wait(uiConnected(), timeouts.directLine);
+
   const textarea = await driver.findElement(By.tagName('textarea'));
 
   await textarea.sendKeys(

__tests__/markdown.js

@@ -2,6 +2,7 @@ import { imageSnapshotOptions, timeouts } from './constants.json';
 
 import allImagesLoaded from './setup/conditions/allImagesLoaded';
 import minNumActivitiesShown from './setup/conditions/minNumActivitiesShown.js';
+import uiConnected from './setup/conditions/uiConnected';
 
 // selenium-webdriver API doc:
 // https://seleniumhq.github.io/selenium/docs/api/javascript/module/selenium-webdriver/index_exports_WebDriver.html
@@ -11,6 +12,8 @@ jest.setTimeout(timeouts.test);
 test('hero card', async () => {
   const { driver, pageObjects } = await setupWebDriver();
 
+  await driver.wait(uiConnected(), timeouts.directLine);
+
   await pageObjects.sendMessageViaSendBox('herocard', { waitForSend: true });
 
   await driver.wait(allImagesLoaded(), timeouts.fetchImage);
@@ -26,6 +29,8 @@ test('hero card', async () => {
 test('null renderMarkdown function', async () => {
   const { driver, pageObjects } = await setupWebDriver({ props: { renderMarkdown: null } });
 
+  await driver.wait(uiConnected(), timeouts.directLine);
+
   await pageObjects.sendMessageViaSendBox('echo **This text should be plain text**', { waitForSend: true });
 
   await driver.wait(allImagesLoaded(), timeouts.fetchImage);

__tests__/setup/pageObjects/sendFile.js

@@ -1,28 +1,19 @@
-import { join, posix } from 'path';
+import { posix } from 'path';
 
 import { timeouts } from '../../constants.json';
 import allOutgoingActivitiesSent from '../conditions/allOutgoingActivitiesSent';
 import getActivityElements from '../elements/getActivityElements';
 import getUploadButton from '../elements/getUploadButton';
 import minNumActivitiesShown from '../conditions/minNumActivitiesShown.js';
 
-function resolveDockerFile(filename) {
-  return posix.join('/home/seluser/Downloads', filename);
-}
-
-function resolveLocalFile(filename) {
-  return join(__dirname, '../local', filename);
-}
-
 export default async function sendFile(driver, filename, { waitForSend = true } = {}) {
   const uploadButton = await getUploadButton(driver);
-  const isUnderDocker = !!(await driver.getCapabilities()).get('webdriver.remote.sessionid');
 
   // The send file function is asynchronous, it doesn't send immediately until thumbnails are generated.
   // We will save the numActivities, anticipate for numActivities + 1, then wait until everything is sent
   const numActivities = (await getActivityElements(driver)).length;
 
-  await uploadButton.sendKeys(isUnderDocker ? resolveDockerFile(filename) : resolveLocalFile(filename));
+  await uploadButton.sendKeys(posix.join('/home/seluser/Downloads', filename));
 
   await driver.wait(minNumActivitiesShown(numActivities + 1));
   waitForSend && (await driver.wait(allOutgoingActivitiesSent(), timeouts.directLine));

chrome.dockerfile

@@ -1,8 +1,7 @@
 # https://github.com/SeleniumHQ/docker-selenium
 # https://hub.docker.com/r/selenium/standalone-chrome/tags/
 
-FROM selenium/node-chrome:3.141.59-zirconium
-# FROM selenium/node-chrome:4.0.0-beta-3-20210426
+FROM selenium/node-chrome:107.0
 
 ADD __tests__/html/assets/uploads /home/seluser/Downloads
 ADD __tests__/setup/local /home/seluser/Downloads

docker-compose-wsl2.yml

@@ -12,18 +12,15 @@ services:
       - webchat
       - webchat2
     environment:
-      HUB_HOST: selenium-hub
-      HUB_PORT: '4444'
-      # SE_EVENT_BUS_HOST: selenium-hub
-      # SE_EVENT_BUS_PUBLISH_PORT: '4442
-      # SE_EVENT_BUS_SUBSCRIBE_PORT: '4443'
-      # SE_OPTS: '--log-level WARNING'
-      # SE_NODE_SESSION_TIMEOUT: '300'
+      SE_EVENT_BUS_HOST: selenium-hub
+      SE_EVENT_BUS_PUBLISH_PORT: '4442'
+      SE_EVENT_BUS_SUBSCRIBE_PORT: '4443'
+      SE_OPTS: '--log-level WARNING'
+      SE_NODE_SESSION_TIMEOUT: '300'
     shm_size: '2.5gb'
 
   selenium-hub:
-    image: selenium/hub:3.141.59-zirconium
-    # image: selenium/hub:4.0.0-beta-3-20210426
+    image: selenium/hub:4.6.0
     container_name: selenium-hub
     environment:
       GRID_TIMEOUT: '300'