WebdriverIO Important Sync mode Updates
Tags: javascript, webdev, testing, tutorial
Published: 2021-06-10 11:38:42

In this post, we will go over some of the important updates related to WebdriverIO Sync mode. We will also cover some of the possible changes that will be coming in the WebdriverIO v8. But, before we start talking about WebdriverIO Sync mode, it’s important to understand how the WebdriverIO Async mode works.

### WebdriverIO Async mode
By default, WebdriverIO uses async mode to interact with the browser or the mobile device. It runs a set of asynchronous commands which are handled via `async/await` in JavaScript. However, there are few downsides to using `async/await` –

- Those unfamiliar with JavaScript or the asynchronous programming finds async/await confusing
- async/await is quite verbose as it is used for majority of the WebdriverIO commands

Let’s take a look at the sample code below –

![Async Mode](https://lh6.googleusercontent.com/kIUO8UWUqA-ppnH_tipqjAvHrOro8wtYLZsAuHtLyeChu3AOytNi3DrvODh8K4UfklXjSyBWQz394rq18SpeEzdiwdGbgT4rzYtz3K8jp1XtQWa0BLrSVYtSq7lKvJym5dk72o4gzho)

There are couple of things to notice here –

- We are starting the it block with the async keyword and then all the commands are using await keyword such as when finding an element or clicking on an element or any other WebdriverIO command.
- We can also not chain these functions with each other as that would also throw an error. Each individual command needs to awaited instead.

---

### WebdriverIO Sync mode
So to address some of the above issues, WebdriverIO came up with sync mode and created a [@wdio/sync plugin](https://www.npmjs.com/package/@wdio/sync) which allows you to run command synchronously through [node-fibers](https://www.npmjs.com/package/fibers). This plugin had some of the following advantages –

- It got rid of all the async/await from the code as the commands are synchronous now
- Tests look a lot more easier to read and understand (beginner friendly)

Let’s take a look at the sample code below –

![sync mode](https://lh6.googleusercontent.com/7a1usKcYdRDj7KkSG4wKaG7G8qHxVa2hK-Dwk7tWKjlSM7rWfdVMbvBH93TECmaxjpgnQ45HW0zuhYJPNHHWJ_2lxgewcfXJv1w9f2gwcRdbVMGrLI-eTqiM1jMJ6ZEIggYvFFpRtxE)

In the above simplified example, you will notice that there are no more async/awaits in the second block which is a lot more user friendly to read and understand.

---

### Why WebdriverIO discontinued Sync mode?
WebdriverIO put out a warning on their website mentioning that the Sync mode will no longer be supported as of 14/04/2021 due to some breaking [changes](https://chromium-review.googlesource.com/c/v8/v8/+/2537690) in Chromium which will not allow the usage of node-fibers. So, from Node v16 they will officially drop the support for WebdriverIO sync mode.

That being said, there’s an active [GitHub thread](https://github.com/webdriverio/webdriverio/discussions/6702) going on to discuss possible options as listed below –

![github-thread](https://lh6.googleusercontent.com/IeoBlvxUQ4VBPqoZg-GglHehlLhEbGMile49jvqbcG4GJJIYCtAu2DkZqw1kmghSNNf2VbYh9kQ10INKGzH27n3aqnGJDLBvVqnfF9wnOA9COVk1TbOn9DN9Ueh3W2Ei-yKTSoYPhOE)

The option the Steering Committee ended up going with was the last one which to accept the fact that WebdriverIO will be asynchronous moving forward.

---

### How the code might look like from WebdriverIO v8?

![v8 code](https://lh3.googleusercontent.com/smMePM6CelJYmTKIm2JaTM-W5gz13FXR2td0anDTxujaMQ3Y2YAdKoDUzjlUQpgvp6Z9gcCjzvF4NHbB9eElrHoXNVzfQnL8aNIv4B9jm7lCRkkUSR9NUlCXM0sGAt44XD_5aVjqOiM)

You will continue to use `async/await` as it is, however, one major change that might possibly occur is that you will be able to chain WebdriverIO commands which is currently not possible in WebdriverIO v7. The advantage of this is that it will make code look a bit cleaner and less verbose.

**Note:** This is still in works at the time of this article so there might be some updates or changes that could occur. You can follow the [thread](https://github.com/webdriverio/webdriverio/discussions/6702) to get the latest info.

---

### You can still use Sync mode
For those of you that still wants to use Sync mode for now, it is still possible to do that. Here’s what you will need to do –

Check package.json to see [@wdio/sync](https://www.npmjs.com/package/@wdio/sync) package is installed or not –

- If installed, you can continue to use the sync mode as usual
- If not installed, then you can install the package 
  - `npm i @wdio/sync`

**Note:** WebdriverIO will continue the support for the sync mode until they decide to drop the support for Node v15. As starting, Node v16 the sync mode will not be supported anymore.

---

### My take on all of these changes
I understand it’s going to be a quite big change for a lot of the people that like the sync version of WebdriverIO given its simplicity, just the way I do. But, I would recommend that you **start using async mode for your new projects** to avoid doing any kind of migrations in the future.

For those with already an existing project in Sync mode will need to use the codemod that will get developed by the WebdriverIO team to do the migration from Sync mode to Async mode.

---

### WebdriverIO Tutorial Series
For those that are following my [WebdriverIO video series](https://www.youtube.com/watch?v=e8goAKb6CC0&list=PL6AdzyjjD5HBbt9amjf3wIVMaobb28ZYN) on YouTube, in the series I am using WebdriverIO v6 with the Sync mode. So you can continue to use the Sync mode by installing the @wdio/sync package or decide to use async mode instead.

I will also be creating videos in the future to show how to use async mode properly once WebdriverIO v8 is out.

---

#### Check out the video below to learn more about WebdriverIO Sync mode and the updates related to it –
{% youtube Jk6giesyECA %}

---

📧 Subscribe to my [mailing list] (https://automationbro.com/mailing-list) to get access to more content like this as well as free access to Private Facebook community

👍 You can follow my content here as well - 
- [Twitter](https://twitter.com/automationbro)
- [LinkedIn](https://www.linkedin.com/company/automation-bro)

...

I love coffees! And, if this post helped you out and you would like to support my work, you can do that by clicking on the button below and buying me a cup of coffee -

<a href="https://www.buymeacoffee.com/automationbro">![Buy me a coffee](https://dev-to-uploads.s3.amazonaws.com/i/4aw2ub3f4qkyjk0ivwt4.png)</a>

You can also support me by liking and sharing this content.

Thanks for reading!