docs: Update docs on testing Electron apps with WebdriverIO (#40227)

* docs: Updated docs on testing Electron using WebdriverIO

Co-authored-by: Christian Bromann <github@christian-bromann.com>

* Update docs/tutorial/automated-testing.md

Co-authored-by: Felix Rieseberg <fr@makenotion.com>

Co-authored-by: Christian Bromann <github@christian-bromann.com>

* Update docs/tutorial/automated-testing.md

Co-authored-by: Felix Rieseberg <fr@makenotion.com>

Co-authored-by: Christian Bromann <github@christian-bromann.com>

* more updates

Co-authored-by: Christian Bromann <git@bromann.dev>

* address PR comments

Co-authored-by: Christian Bromann <git@bromann.dev>

* Update docs/tutorial/automated-testing.md

Co-authored-by: Erick Zhao <erick@hotmail.ca>

Co-authored-by: Christian Bromann <github@christian-bromann.com>

* Update docs/tutorial/automated-testing.md

Co-authored-by: Erick Zhao <erick@hotmail.ca>

Co-authored-by: Christian Bromann <github@christian-bromann.com>

* Update docs/tutorial/automated-testing.md

Co-authored-by: Erick Zhao <erick@hotmail.ca>

Co-authored-by: Christian Bromann <github@christian-bromann.com>

* Update docs/tutorial/automated-testing.md

Co-authored-by: Erick Zhao <erick@hotmail.ca>

Co-authored-by: Christian Bromann <github@christian-bromann.com>

* Update docs/tutorial/automated-testing.md

Co-authored-by: Erick Zhao <erick@hotmail.ca>

Co-authored-by: Christian Bromann <github@christian-bromann.com>

---------

Co-authored-by: trop[bot] <37223003+trop[bot]@users.noreply.github.com>
Co-authored-by: Christian Bromann <github@christian-bromann.com>
Co-authored-by: Christian Bromann <git@bromann.dev>

docs/tutorial/automated-testing.md

@@ -22,34 +22,101 @@ There are a few ways that you can set up testing using WebDriver.
 Node.js package for testing with WebDriver. Its ecosystem also includes various plugins
 (e.g. reporter and services) that can help you put together your test setup.
 
+If you already have an existing WebdriverIO setup, it is recommended to update your dependencies and validate your existing configuration with how it is [outlined in the docs](https://webdriver.io/docs/desktop-testing/electron#configuration).
+
 #### Install the test runner
 
-First you need to run the WebdriverIO starter toolkit in your project root directory:
+If you don't use WebdriverIO in your project yet, you can add it by running the starter toolkit in your project root directory:
 
 ```sh npm2yarn
-npx wdio . --yes
+npm init wdio@latest ./
 ```
 
-This installs all necessary packages for you and generates a `wdio.conf.js` configuration file.
+This starts a configuration wizard that helps you put together the right setup, installs all necessary packages, and generates a `wdio.conf.js` configuration file. Make sure to select _"Desktop Testing - of Electron Applications"_ on one of the first questions asking _"What type of testing would you like to do?"_.
 
 #### Connect WDIO to your Electron app
 
-Update the capabilities in your configuration file to point to your Electron app binary:
+After running the configuration wizard, your `wdio.conf.js` should include roughly the following content:
 
-```javascript title='wdio.conf.js'
-exports.config = {
+```js title='wdio.conf.js' @ts-nocheck
+export const config = {
   // ...
+  services: ['electron'],
   capabilities: [{
-    browserName: 'chrome',
-    'goog:chromeOptions': {
-      binary: '/path/to/your/electron/binary', // Path to your Electron binary.
-      args: [/* cli arguments */] // Optional, perhaps 'app=' + /path/to/your/app/
+    browserName: 'electron',
+    'wdio:electronServiceOptions': {
+      // WebdriverIO can automatically find your bundled application
+      // if you use Electron Forge or electron-builder, otherwise you
+      // can define it here, e.g.:
+      // appBinaryPath: './path/to/bundled/application.exe',
+      appArgs: ['foo', 'bar=baz']
     }
   }]
   // ...
 }
 ```
 
+#### Write your tests
+
+Use the [WebdriverIO API](https://webdriver.io/docs/api) to interact with elements on the screen. The framework provides custom "matchers" that make asserting the state of your application easy, e.g.:
+
+```js @ts-nocheck
+import { browser, $, expect } from '@wdio/globals'
+
+describe('keyboard input', () => {
+  it('should detect keyboard input', async () => {
+    await browser.keys(['y', 'o'])
+    await expect($('keypress-count')).toHaveText('YO')
+  })
+})
+```
+
+Furthermore, WebdriverIO allows you to access Electron APIs to get static information about your application:
+
+```js @ts-nocheck
+import { browser, $, expect } from '@wdio/globals'
+
+describe('when the make smaller button is clicked', () => {
+  it('should decrease the window height and width by 10 pixels', async () => {
+    const boundsBefore = await browser.electron.browserWindow('getBounds')
+    expect(boundsBefore.width).toEqual(210)
+    expect(boundsBefore.height).toEqual(310)
+
+    await $('.make-smaller').click()
+    const boundsAfter = await browser.electron.browserWindow('getBounds')
+    expect(boundsAfter.width).toEqual(200)
+    expect(boundsAfter.height).toEqual(300)
+  })
+})
+```
+
+or to retrieve other Electron process information:
+
+```js @ts-nocheck
+import fs from 'node:fs'
+import path from 'node:path'
+import { browser, expect } from '@wdio/globals'
+
+const packageJson = JSON.parse(fs.readFileSync(path.join(__dirname, '..', 'package.json'), { encoding: 'utf-8' }))
+const { name, version } = packageJson
+
+describe('electron APIs', () => {
+  it('should retrieve app metadata through the electron API', async () => {
+    const appName = await browser.electron.app('getName')
+    expect(appName).toEqual(name)
+    const appVersion = await browser.electron.app('getVersion')
+    expect(appVersion).toEqual(version)
+  })
+
+  it('should pass args through to the launched application', async () => {
+    // custom args are set in the wdio.conf.js file as they need to be set before WDIO starts
+    const argv = await browser.electron.mainProcess('argv')
+    expect(argv).toContain('--foo')
+    expect(argv).toContain('--bar=baz')
+  })
+})
+```
+
 #### Run your tests
 
 To run your tests:
@@ -58,6 +125,12 @@ To run your tests:
 $ npx wdio run wdio.conf.js
 ```
 
+WebdriverIO helps launch and shut down the application for you.
+
+#### More documentation
+
+Find more documentation on Mocking Electron APIs and other useful resources in the [official WebdriverIO documentation](https://webdriver.io/docs/desktop-testing/electron).
+
 ### With Selenium
 
 [Selenium](https://www.selenium.dev/) is a web automation framework that