update course

README.md

@@ -1,16 +1,19 @@
 WebdriverIO Hands On
 ====================
 
-This little course will help you to get up and running with WebdriverIO. It will walk you through different steps that will explain how to set up and use the project successfully.
+This course will help you to get up and running with WebdriverIO. It will walk you through different steps that will explain how to set up and use the project successfully.
 
 ## Prerequisites
 
 In order to go through the course the following software is required to be installed on your system:
 
-- Node.js (v18 or higher, recommended is v20)
-- An updated browser (e.g. Chrome, Firefox etc.)
+- Node.js (v18.19 or higher, recommended is v22 as it is the current LTS)
 
-If you don't have this installed go to [Chapter 1](./chapter_01.md) where we walk through all install steps.
+## Install Node.JS
+
+The project is build on top of Node.js which is a JavaScript runtime built on [Chrome's V8 JavaScript engine](https://v8.dev/). It can be installed on all major OS systems such as Windows, Mac or Linux. In order to get it, open [Node.js](https://nodejs.org/en) download the installer.
+
+This will also install NPM for you which is the package manager for Node.js. NPM is required to download the WebdriverIO package.
 
 ## Chapters
 

chapter_01.md

@@ -1,17 +1,7 @@
 Setup Environment
 =================
 
-## Objective
-
-The goal in this chapter is to setup the environment we need to use WebdriverIO.
-
-## Install Node.JS
-
-The project is build on top of Node.js which is a JavaScript runtime built on [Chrome's V8 JavaScript engine](https://v8.dev/). It can be installed on all major OS systems such as Windows, Mac or Linux. In order to get it, open the [download page](https://nodejs.org/en/download/) of the project and choose the installer of your environment. It is recommended to download the latest LTS (long-time support). Currently this is Node.js `v22.14.0`.
-
-This will also install NPM for you which is the package manager for Node.js. NPM is required to download the WebdriverIO package.
-
-## Setup Course Directory
+## Setup Project Directory
 
 As we walk through each chapter we will build up a project that we can use as to run automated tests with WebdriverIO. To check in all changes, let's create a directory for it and init git:
 

chapter_02.md

@@ -9,13 +9,7 @@ After we have set up everything to automate a browser on our machine, let's writ
 4. Mark the second item as completed
 5. Print out the amount of items left
 
-In order to get started navigate into the project directory you have created in [Chapter 1](./chapter1.md):
-
-```sh
-$ cd ~/webdriverio-hands-on
-```
-
-Then open your IDE and create file that we call `test.js`. Next step is to init an NPM project so that we can store the dependency that we need to the length of the course:
+Open your IDE and open the project you just created in [Chapter 1](./chapter1.md) and create file that we call `test.js`. Next step is to init an NPM project so that we can store the dependency that we need to the length of the course:
 
 ```sh
 $ npm init -y
@@ -24,10 +18,10 @@ $ npm init -y
 Next, install the WebdriverIO NPM [package](https://www.npmjs.com/package/webdriverio):
 
 ```sh
-npm install --save-dev webdriverio
+npm i -D webdriverio
 ```
 
-In your `test.js` file start writing the basic setup. I recommend to leverage the `async/await` functionality of Node.js that allows you to handle async operations in Node. Since every command is an asynchronous HTTP request to the browser driver, we have to make sure that we handle these async operations properly. You can use the following basic setup:
+In your `test.js` file start writing the basic setup. Since every command is an asynchronous HTTP request to the browser driver, we have to make sure that we handle these async operations properly, luckily Node's `async/await` feature allows you to handle async operations in an easy way. You can use the following basic setup:
 
 ```js
 import { remote } from 'webdriverio'
@@ -57,7 +51,7 @@ You should be able to run the script now by calling:
 $ node test.js
 ```
 
-This script now should open and close the browser again. You can now work on the assignment to create an automation script that does the steps outlined at the top of this chapter. You find all commands that are available in WebdriverIO in the [API docs](https://webdriver.io/docs/api.html).
+This script should open and then close the browser. You can work on the assignment to create an automation script that executes the steps outlined at the top of this chapter. You find all commands that are available in WebdriverIO in the [API docs](https://webdriver.io/docs/api.html).
 
 ## Extra #1
 
@@ -67,7 +61,7 @@ To speed up the test with our current example try to send all 3 Todo items with
 
 ## Extra #2
 
-Instead of inserting ToDo List items we can manipulate the application state by changing e.g. the local storage before the application is rendered. This can be done through the `onBeforeLoad` option of the `url` command which injects a script to pre-populate the local storage with items so that if you open the page it should have already have 3 ToDos stored. The local storage key for these items is `vue-todomvc` and should contain a list like:
+Instead of inserting ToDo list items, we can manipulate the application state by changing the local storage before the application is rendered. This can be done through the `onBeforeLoad` option of the `url` command which injects a script to pre-populate the local storage with items so that if you open the page it should have already have 3 ToDo items stored. The local storage key for these items is `vue-todomvc` and should contain a list like:
 
 ```json
 [{

chapter_03.md

@@ -2,69 +2,69 @@
 
 If you have finished the last chapter successfully, good job 👍! If you just started with this chapter then no worries.
 
-We are going to set up everything to automate Chrome on our machine with the WDIO Testrunner (and write our first automated script). The testrunner helps you with various things that you need in your day to day automation life. It provides you with useful reporters, services and other neat features that will make your life easier.
+We are going to set up everything to automate Chrome on our machine with the WDIO testrunner (and write our first automated script). The testrunner helps you with various things that you need in your day to day automation life. It provides you with useful reporters, services and other neat features that will make your life easier.
 
-In this chapter, we gonna port our current Node.js automation script into a test suite that is using the testrunner. If you haven't written the script, then the objective for the script is as follows: write a simple Node.js script that does the following things:
+In this chapter, we will port the Node.js automation script into a test suite that is using the testrunner. If you haven't written the script, then the objective for the script is as follows: write a Node.js script that does the following things:
 
 1. Open the Chrome browser
 2. Go to the following page: [http://todomvc.com/examples/vue/dist](http://todomvc.com/examples/vue/dist)
 3. Enter 3 items into the ToDo list
 4. Mark the second item as completed
 5. Print out the amount of items left
 
-The objectives for this chapter are as follow:
+The objectives for this chapter are as follows:
 
 1. Initiate a `wdio.conf.ts` file using the WDIO setup wizard
 2. Create a test directory where we put all our e2e test files
 3. Port the code in your `test.ts` file into an actual test
 4. Add an assertion library to make an assertion in the test
-5. Create a simple entry in package.json to run test through NPM script
+5. Create a simple entry in `package.json` to run test through NPM script
 
-The WDIO testrunner allows you to scale up your automation tests. It takes on a lot of work that you would need to setup up manually. The features and advantages of it are the following:
+The WDIO testrunner allows you to scale up your automation tests. It takes on a lot of work that you would otherwise need to setup up manually. The features and advantages of it are the following:
 
 - runs test in a parallel automatically
 - creates and tears down sessions for you
-- comes with a lot plugins written by core members and 3rd party developers
+- comes with a lot of official and 3rd party plugins
 - handles log management
 - and much more
 
-To get up and running with the testrunner, call:
+To get up and running with the testrunner, execute the following in your terminal:
 
 ```sh
 $ npm init wdio@latest .
 ```
 
-This will install the CLI interface that you can use to run your tests with. Instead of running the `node` command directly on a file you are now using the new installed cli tool called `wdio` to run your tests. By calling this command a configuration wizard is automatically started to walk you through the set up.
+This will install the CLI interface that you can use to run your tests with. Instead of running the `node` command directly on a file, you are now using the newly installed CLI tool `wdio` to run your tests. By calling this command, a configuration wizard is automatically started to walk you through the setup.
 
-You are being asked a bunch of questions that you can answer as follows:
+You will be asked a few questions that you can answer as follows:
 
 > A project named "..." was detected at "...", correct?
 
-Usually it should detect the right folder you are in as root folder, therefor you can confirm.
+It will show the current project and project directory, therefore you can confirm as we do not need to change it for this workshop.
 
 > What type of testing would you like to do?
 
-WebdriverIO provides a variety of use cases listed in the selection. For this workshop we will start with the most common one which is `E2E Testing - of Web or Mobile Applications` but feel free to explore other options as well.
+WebdriverIO provides a variety of use cases listed in the selection. For this workshop we will start with the most common option which is `E2E Testing - of Web or Mobile Applications` but feel free to explore the other options after the workshop.
 
 > Where is your automation backend located?
 
-As we are getting started we want to run our test on your local machine. We will integrate cloud vendors in a later chapter.
+As we are getting started we want to run the test, which will be running on your local machine. We will integrate cloud vendors in a later chapter.
 
 > Which environment you would like to automate?
 
-Running end-to-end tests requires different setups depending whether you run a browser or mobile test. Here WebdriverIO needs to know your desired environment to properly configure the test. For this workshop we use the `Web - web applications in the browser` environment.
+Running end-to-end tests requires different setups depending on whether you run a browser or mobile test. Here WebdriverIO needs to know your desired environment to properly configure the test. For this workshop we use the `Web - web applications in the browser` environment.
 
 > With which browser should we start?
 
-Let's keep it simple and only select Chrome. Later on we can add more browser to our matrix.
+Let's keep it simple and only select Chrome. Later on we can add more browsers to our matrix.
 
 > Which framework do you want to use?
 
-You can decide any framework you want here as their way of working is similar. However [Mocha](https://mochajs.org/) is the most popular one though.
+[Mocha](https://mochajs.org/) or [Jasmine](https://jasmine.github.io/) are the framework of choice for this workshop.
 
 > Are you using a compiler?
 
-If you prefer to write your tests with TypeScript or Babel you can pick one of the compilers here. We recommend to use TypeScript as it offers a lot of great features like type safety. For this workshop we will use TypeScript but you can also select "No!" and run tests in JavaScript.
+We recommend you to use TypeScript as it offers a lot of great features like type safety. For this workshop we will use TypeScript but you can also select "No!" and run tests in JavaScript.
 
 > Do you want WebdriverIO to autogenerate some test files?
 
@@ -78,7 +78,7 @@ Since we've already written our automation script, we can press `n` here. We'll
 
 > Which reporter do you want to use?
 
-Select `spec` reporter here. It is the common most used reporter.
+The `spec` reporter is the reporter which we will be using for this workshop and we'll add another one in the next chapter.
 
 > Do you want to add a plugin to your test setup?
 
@@ -113,9 +113,7 @@ To automate the browser through the [browser object](https://webdriver.io/docs/a
 import { browser } from "@wdio/globals";
 ```
 
-or use `browser` directly as variable since it is available in the global scope.
-
-After you've ported/written the tests you can run it using the wdio testrunner by calling:
+After you've ported/written the tests you can run it using the WDIO testrunner by calling:
 
 ```sh
 $ npx wdio run ./wdio.conf.ts

chapter_04.md

@@ -1,6 +1,6 @@
 # Use of Reporter and Services
 
-Congratulation for successfully creating your first WebdriverIO test suite. Now as we move forward we want to make use of the diverse WebdriverIO ecosystem and add some more reporters and services to our test suite. The objectives are:
+Congratulations for successfully creating your first WebdriverIO test suite. As we move forward we want to make use of the diverse WebdriverIO ecosystem and add some more reporters and services to our test suite. The objectives are:
 
 1. Add the [Allure](http://allure.qatools.ru/) reporter to the list of reporters
 2. Use the Allure CLI to generate the Allure report in the `onComplete` hook

chapter_05.md

@@ -1,17 +1,17 @@
 Custom Reporters and Services
 =============================
 
-One of the advantages of the WebdriverIO framework is that it can be extended in various ways to fit your needs and requirements. [Custom reporter](https://webdriver.io/docs/customreporter.html) and [custom services](https://webdriver.io/docs/customservices.html) provide a way to encapsulate logic into single building blocks and provide them for teams in your organization. It is an excellent way to share code across multiple projects.
+One of the advantages of the WebdriverIO framework is that it can be extended in various ways to fit your needs and requirements. Custom [reporters](https://webdriver.io/docs/customreporter.html) and custom [services](https://webdriver.io/docs/customservices.html) provide a way to encapsulate logic into single building blocks and provide them for teams in your organization. It is an excellent way to share code across multiple projects.
 
 In this chapter we want to build a custom service and reporter to improve logging in our framework. The objectives are:
 
-1. Create a [custom reporter](https://webdriver.io/docs/customreporter.html) that prints out the duration of a test with its name
+1. Create a custom [reporter](https://webdriver.io/docs/customreporter.html) that prints out the duration of a test with its name
 2. Allow the user of that reporter to specify an option `showState` which if set to `true` shows the state of the test too
-3. Write a [custom service](https://webdriver.io/docs/customservices.html) and integrate it into your test suite
+3. Write a custom [service](https://webdriver.io/docs/customservices.html) and integrate it into your test suite
 4. Move the code you have written to generate the Allure report into the service and remove it from the config file
 5. Enhance the service to clean up the old Allure report before the test starts
 6. Allow the user of that service to specify an option `outputDir` that allows to specify the directory where the report should be stored
 
 Services are custom classes that can interfere with the test using hooks. They have their own scope and can store a certain state over a period of time throughout the test. This allows you to e.g. store the history of commands and their results.
 
-While services and reporters are plugins that can be written by the community and published as NPM packages, they can also just be internal packages to be required in your config and added to the services/reporter list.
+While services and reporters are plugins that can be written by the community and published as NPM packages, they can also be internal packages to be required in your config and added to the services/reporter list.

chapter_06.md

@@ -1,15 +1,15 @@
 Google Lighthouse Integration
 =============================
 
-Now that we successfully have build our own custom service, let's take a look what other services are out there that can help us extend our test suite.
+Now that we have successfully built our own custom service, let's take a look what other services are out there that can help us extend our test suite.
 
 ## Performance Testing
 
-While it is important that an application is working functionally there are a lot of other qualitative aspects that you might be interested in. One of them is e.g. performance. A fast loading app is a very important factor not only for user experience but also for SEO and accessibility reasons.
+While it is important that an application is working functionally, there are a lot of other qualitative aspects that you might be interested in, like performance. A fast loading app is a very important factor, not only for the user experience but also for SEO and accessibility reasons.
 
-WebdriverIO allows you to test the performance of your frontend application using its integration to [Google Lighthouse](https://developers.google.com/web/tools/lighthouse) which is a popular tool for capturing important performance metrics. To enable these features you need to add a service extension called [`@wdio/devtools-service`](https://www.npmjs.com/package/@wdio/devtools-service). The objectives for this chapter are:
+WebdriverIO allows you to test the performance of your frontend application using its integration to [Google Lighthouse](https://developers.google.com/web/tools/lighthouse) which is a popular tool for capturing important performance metrics. To enable these features you need to add a service extension called [`@wdio/lighthouse-service`](https://www.npmjs.com/package/@wdio/lighthouse-service). The objectives for this chapter are:
 
-- add `@wdio/devtools-service` to your setup
+- add `@wdio/lighthouse-service` to your setup
 - write a new test that captures and asserts the Google Lighthouse performance score of our [example application](http://todomvc.com/examples/vue/)
     - to emulate a real user experience for our test we mimic our browser to be an iPhone X with a good 3G connection
 - add an assertion for the `speedIndex` metric
@@ -38,6 +38,6 @@ Capturing the performance of a browser requires access to native browser APIs. C
 
 A progressive web application is a type of application software delivered through the web, built using common web technologies including HTML, CSS and JavaScript. It is intended to work on any platform that uses a standards-compliant browser, including both desktop and mobile devices<sup>[[1](https://en.wikipedia.org/wiki/Progressive_web_application)]</sup>.
 
-To ensure our example application fulfills the requirements of a PWA we can use the [`checkPWA`](https://webdriver.io/docs/devtools-service#pwa-testing) command from the `@wdio/devtools-service`. The objectives for this chapter are:
+To ensure our example application fulfills the requirements of a PWA we can use the [`checkPWA`](https://webdriver.io/docs/lighthouse-service#pwa-testing) command from the `@wdio/lighthouse-service`. The objectives for this chapter are:
 
 - add a test that tests our example to be a valid PWA