How WebdriverIO's synchronous mode works

WebdriverIO's synchronous mode works by abstracting the asynchronous nature of WebDriver commands, allowing you to write tests as if they were synchronous. This is achieved using a package called @wdio/sync. Here's an overview of how it works and how it simplifies test writing:

1. Asynchronous Nature of WebDriver Commands

WebDriver commands, like those used in WebdriverIO, are inherently asynchronous. For example, navigating to a webpage, finding an element, or interacting with it, all involve network communication with the browser, which is asynchronous by nature. Typically, in JavaScript, you'd handle this asynchrony using async/await:

await browser.url('https://example.com');
const title = await browser.getTitle();

2. Synchronous Mode with @wdio/sync

WebdriverIO's synchronous mode abstracts away the need for async/await by making these asynchronous operations appear synchronous. This is done using the @wdio/sync package, which leverages Fibers (in Node.js) or a similar mechanism to allow this synchronous-looking code to run in an asynchronous context.

In synchronous mode, you can write:

browser.url('https://example.com');
const title = browser.getTitle();

This code looks and behaves as if it's synchronous, but under the hood, WebdriverIO handles the asynchronous operations for you.

3. How Synchronous Mode Works Internally

The synchronous mode works by wrapping each asynchronous WebDriver command in a synchronous-looking function. Here's a simplified explanation:

1. Fibers/Async Hooks: WebdriverIO uses Fibers (in older versions) or Async Hooks to pause and resume the execution of code at specific points. This allows the code to appear synchronous even though it's executing asynchronously in the background.

2. Command Wrapping: Every WebDriver command is wrapped so that it can be paused at the await point and resumed when the promise resolves, but without requiring the user to write await.

3. Task Queue: WebdriverIO maintains a task queue where commands are enqueued. Each command in the queue waits for the previous one to complete before it starts executing. This ensures the commands run in the correct order, maintaining the appearance of synchronous execution.

4. Error Handling: Errors in synchronous mode are also handled gracefully. If an asynchronous command fails, WebdriverIO catches the error and allows you to handle it in a way that feels natural in synchronous code.

4. Advantages of Synchronous Mode

• Simplified Code: Without needing to write async/await, the code is more concise and easier to read.
• Ease of Use: Test authors who are less familiar with asynchronous programming can write tests more intuitively.
• Less Boilerplate: Eliminates the need for wrapping every command with await, reducing the boilerplate code.

5. Enabling Synchronous Mode

To enable synchronous mode in WebdriverIO, you need to install the @wdio/sync package and configure your WebdriverIO setup to use it.

1. Install @wdio/sync:

   npm install @wdio/sync --save-dev
   

2. Update WebdriverIO Configuration:

   In your wdio.conf.js, ensure that sync: true is set:

   exports.config = {
       // Other configurations...
       sync: true,
   };
   

3. Write Tests in Synchronous Style:

   You can now write tests without async/await:

   describe('My Test Suite', () => {
       it('should open a website and check the title', () => {
           browser.url('https://example.com');
           const title = browser.getTitle();
           expect(title).toBe('Example Domain');
       });
   });
   

6. When Not to Use Synchronous Mode

While synchronous mode is convenient, it's not always the best choice:

• Performance: In some cases, the overhead of managing Fibers/Async Hooks can impact performance slightly.
• Compatibility: Some newer versions of Node.js and certain environments may have limited support for the mechanisms used in synchronous mode.
• Flexibility: Asynchronous mode provides more flexibility and is closer to native JavaScript async patterns, which might be preferred in complex scenarios or when integrating with other asynchronous code.