Update WebdriverIO to v9 for FURN tests

.ado/templates/setup-repo.yml

@@ -5,6 +5,11 @@ steps:
       versionSpec: '5.6.0'
     displayName: 'Install Nuget'
 
+  - task: UseNode@1
+    inputs:
+      version: '22.x'
+    displayName: 'Use Node.js 22.x'
+
   - script: |
       yarn
     displayName: 'yarn install'

apps/E2E/package.json

@@ -40,13 +40,13 @@
     "@types/jasmine": "5.1.4",
     "@types/node": "^22.2.0",
     "@types/react": "^18.2.0",
-    "@wdio/appium-service": "^8.40.0",
-    "@wdio/cli": "^8.40.0",
-    "@wdio/globals": "^8.40.0",
-    "@wdio/jasmine-framework": "^8.40.0",
-    "@wdio/json-reporter": "^8.40.0",
-    "@wdio/local-runner": "^8.40.0",
-    "@wdio/spec-reporter": "^8.40.0",
+    "@wdio/appium-service": "^9.12.6",
+    "@wdio/cli": "^9.12.6",
+    "@wdio/globals": "^9.12.6",
+    "@wdio/jasmine-framework": "^9.12.6",
+    "@wdio/json-reporter": "^9.12.6",
+    "@wdio/local-runner": "^9.12.6",
+    "@wdio/spec-reporter": "^9.12.6",
     "appium": "^2.11.2",
     "appium-mac2-driver": "^1.12.0",
     "appium-uiautomator2-driver": "^3.0.5",
@@ -56,7 +56,7 @@
     "rimraf": "^5.0.1",
     "ts-node": "^10.7.0",
     "typescript": "4.9.4",
-    "webdriverio": "^8.40.0"
+    "webdriverio": "^9.12.6"
   },
   "installConfig": {
     "hoistingLimits": "dependencies"

apps/E2E/src/common/BasePage.ts

@@ -20,7 +20,7 @@ const PLATFORM = process.env['E2ETEST_PLATFORM'] as Platform;
 const NATIVE_TESTING = process.env['NATIVE_TESTING'] == 'true';
 export const COMPONENT_SCROLL_COORDINATES = { x: -0, y: -100 }; // These are the offsets. Y is negative because we want the touch to move up (and thus it scrolls down)
 
-let rootView: WebdriverIO.Element | null = null;
+let rootView: WebdriverIO.Element | ChainablePromiseElement | null = null;
 
 /* Win32/UWP-Specific Selector. We use this to get elements on the test page */
 export async function By(identifier: string) {
@@ -37,7 +37,7 @@ async function QueryWithChaining(identifier) {
     rootView = await $('~' + ROOT_VIEW);
   }
   const selector = '~' + identifier;
-  let queryResult: WebdriverIO.Element;
+  let queryResult: WebdriverIO.Element | ChainablePromiseElement;
   queryResult = await rootView.$(selector);
   if (queryResult.error) {
     // In some cases, such as opened ContextualMenu items, the element nodes are not children of the rootView node, meaning we need to start our search from the top of the tree.
@@ -133,7 +133,7 @@ export abstract class BasePage {
    * The advantage to this over testing using .isEqual in a spec is that this throws a detailed error if
    * the expected and actual values don't match. This should be called for attribute tests in specs. */
   async compareAttribute(
-    element: Promise<WebdriverIO.Element>,
+    element: WebdriverIO.Element | ChainablePromiseElement,
     attribute: Attribute | AndroidAttribute,
     expectedValue: any,
   ): Promise<boolean> {

apps/E2E/wdio.conf.android.js

@@ -6,7 +6,7 @@ const jasmineDefaultTimeout = 60000; // 60 seconds for Jasmine test timeout
 
 exports.config = {
   runner: 'local', // Where should your test be launched
-  specs: ['src/**/specs/*.android.ts'],
+  specs: [['src/**/specs/*.android.ts']],
   exclude: [],
 
   maxInstances: 30,

apps/E2E/wdio.conf.ios.js

@@ -6,7 +6,7 @@ const jasmineDefaultTimeout = 60000; // 60 seconds for Jasmine test timeout
 
 exports.config = {
   runner: 'local', // Where should your test be launched
-  specs: ['src/**/specs/*.ios.ts'],
+  specs: [['src/**/specs/*.ios.ts']],
   exclude: [],
 
   maxInstances: 30,

apps/E2E/wdio.conf.macos.js

@@ -6,7 +6,7 @@ const jasmineDefaultTimeout = 60000; // 60 seconds for Jasmine test timeout
 
 exports.config = {
   runner: 'local', // Where should your test be launched
-  specs: ['src/**/specs/*.macos.ts'],
+  specs: [['src/**/specs/*.macos.ts']],
   exclude: [
     /* 'path/to/excluded/files' */
   ],
@@ -156,7 +156,7 @@ exports.config = {
    */
   afterTest: (test, context, results) => {
     const resultString = results.passed ? 'Passed' : 'Failed';
-    console.log(`\nTest Case: "${test.description}".\nResult: "${resultString}".\nDuration: "${(results.duration/600).toFixed(2)}s". \n`);
+    console.log(`\nTest Case: "${test.description}".\nResult: "${resultString}".\nDuration: "${(results.duration / 600).toFixed(2)}s". \n`);
 
     // if test passed, ignore, else take and save screenshot. Unless it's the first test that boots the app,
     // it may be useful to have a screenshot of the app on load.

apps/E2E/wdio.conf.win32.js

@@ -12,7 +12,7 @@ const jasmineDefaultTimeout = 60000; // 60 seconds for Jasmine test timeout
 
 exports.config = {
   runner: 'local', // Where should your test be launched
-  specs: ['../E2E/src/**/specs/*.win.ts'],
+  specs: [['../E2E/src/**/specs/*.win.ts']],
   exclude: [],
 
   capabilities: [

apps/E2E/wdio.conf.windows.js

@@ -9,18 +9,20 @@ exports.config = {
   /* UWP controls are a subset of the Win32 controls. Only some work on our UWP test app,
   so we must specify which ones we want to test here. */
   specs: [
-    'src/ActivityIndicator/specs/*.win.ts',
-    'src/ButtonLegacy/specs/*.win.ts',
-    'src/CheckboxLegacy/specs/*.win.ts', // See spec file for more information
-    'src/LinkLegacy/specs/*.win.ts',
-    'src/PersonaCoin/specs/*.win.ts',
-    'src/Pressable/specs/*.win.ts',
-    'src/Separator/specs/*.win.ts',
-    'src/TabsLegacy/specs/*.windows.ts', // See spec file for more information
-    'src/TextLegacy/specs/*.win.ts',
-    'src/TextV1/specs/*.win.ts',
-    'src/Theme/specs/*.win.ts',
-    'src/Tokens/specs/*.win.ts',
+    [
+      'src/ActivityIndicator/specs/*.win.ts',
+      'src/ButtonLegacy/specs/*.win.ts',
+      'src/CheckboxLegacy/specs/*.win.ts', // See spec file for more information
+      'src/LinkLegacy/specs/*.win.ts',
+      'src/PersonaCoin/specs/*.win.ts',
+      'src/Pressable/specs/*.win.ts',
+      'src/Separator/specs/*.win.ts',
+      'src/TabsLegacy/specs/*.windows.ts', // See spec file for more information
+      'src/TextLegacy/specs/*.win.ts',
+      'src/TextV1/specs/*.win.ts',
+      'src/Theme/specs/*.win.ts',
+      'src/Tokens/specs/*.win.ts',
+    ],
   ],
   exclude: [
     /* 'path/to/excluded/files' */
@@ -160,7 +162,7 @@ exports.config = {
    */
   afterTest: (test, context, results) => {
     const resultString = results.passed ? 'Passed' : 'Failed';
-    console.log(`\nTest Case: "${test.description}".\nResult: "${resultString}".\nDuration: "${(results.duration/600).toFixed(2)}s". \n`);
+    console.log(`\nTest Case: "${test.description}".\nResult: "${resultString}".\nDuration: "${(results.duration / 600).toFixed(2)}s". \n`);
 
     // if test passed, ignore, else take and save screenshot.
     if (results.passed) {

change/@fluentui-react-native-e2e-testing-d29a7d09-1c67-4089-b849-50933e6b1ef5.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "updated wdio versions and fixed tests",
+  "packageName": "@fluentui-react-native/e2e-testing",
+  "email": "gulnazsayed@microsoft.com",
+  "dependentChangeType": "patch"
+}