Using async/await breaks @wdio/sync with e.g. browser.$(...).waitForExist is not a function

Environment:

• WebdriverIO version: 6.3.6
• Mode: Standalone
• Node.js version: v12.15.0
• NPM version: 6.14.7
• Browser name and version: Chrome 84.0.4147.105
• Platform name and version: macOS Catalina 10.15
• Additional wdio packages used (if applicable): @wdio/sync

Config of WebdriverIO No configuration

Describe the bug Using @wdio/sync package to execute statements synchronously breaks when used in combination with async/await before/after the call to sync. A typical result is that the browser object inside the sync call has not been set up to be synchronous:

TypeError: browser.$(...).waitForExist is not a function

To Reproduce See a minimal code example below:

index.js

const remote = require("webdriverio").remote;
const sync = require("@wdio/sync").default;

let browser;
(async () => {
  browser = await remote({
    capabilities: { browserName: "chrome" },
  });

  await browser.navigateTo("https://webdriver.io");

  await sync(() => {
    browser.$("#search_input_react").waitForExist();
  });

  await browser.deleteSession();
})().catch((err) => {
  console.error(err);
  return browser.deleteSession();
});

package.json

{
  "name": "wdio-bug",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@wdio/sync": "^6.3.6",
    "webdriverio": "^6.3.6"
  }
}

Expected behavior I expect one to be able to use @wdio/sync package and the sync function to execute statements synchronously in combination with using async/await constructs next to each other.

Given the minimal example above, I would argue that whether browser.navigateTo("https://webdriver.io"); is inside the sync call or not (as long as we make sure to wait for the result) should yield the same result.

Log

console output

2020-08-04T08:48:03.630Z INFO webdriverio: Initiate new session using the devtools protocol
2020-08-04T08:48:03.635Z INFO devtools: Launch Google Chrome with flags: --disable-extensions --disable-background-networking --disable-background-timer-throttling --disable-backgrounding-occluded-windows --disable-sync --metrics-recording-only --disable-default-apps --mute-audio --no-first-run --disable-hang-monitor --disable-prompt-on-repost --disable-client-side-phishing-detection --password-store=basic --use-mock-keychain --disable-component-extensions-with-background-pages --disable-breakpad --disable-dev-shm-usage --disable-ipc-flooding-protection --disable-renderer-backgrounding --enable-features=NetworkService,NetworkServiceInProcess --disable-features=site-per-process,TranslateUI,BlinkGenPropertyTrees --window-position=0,0 --window-size=1200,900
2020-08-04T08:48:04.686Z INFO devtools: Connect Puppeteer with browser on port 60187
2020-08-04T08:48:05.567Z INFO devtools: COMMAND navigateTo("https://webdriver.io")
2020-08-04T08:48:08.155Z INFO devtools: RESULT null
2020-08-04T08:48:08.170Z INFO devtools: COMMAND findElement("css selector", "#search_input_react")
2020-08-04T08:48:08.189Z INFO devtools: RESULT { 'element-6066-11e4-a52e-4f735466cecf': 'ELEMENT-1' }
TypeError: browser.$(...).waitForExist is not a function
    at ***/index.js:13:38
2020-08-04T08:48:08.206Z INFO devtools: COMMAND deleteSession()
2020-08-04T08:48:08.207Z INFO devtools: RESULT null

Additional context One may argue that the problem is easily circumvented by simply issuing all wdio calls inside the sync function, avoiding the need for using async/await all together. In this trivial example, yes, but in general code may not be related as closely as this example illustrates (i.e. it may be split in different functions/classes/files etc.).

[joshskumar]

hi,

the code works when used as below

const remote = require("webdriverio").remote;
const sync = require("@wdio/sync").default;

let browser;
(async () => {
  browser = await remote({
    capabilities: { browserName: "chrome" },
  });

  await browser.navigateTo("https://webdriver.io");

  await sync( async () => {
    (await browser.$("#search_input_react")).waitForExist({
        timeout:5
    });
  });
  await browser.deleteSession();
})().catch((err) => {
  console.error(err);
  return browser.deleteSession();
});

so looks like the waitForExist is not working when there is no await for the element find…

this will be like this because the without the Object created it will not be able to find the function waitForExist()

[christian-bromann]

As we are moving away from sync execution, this issue is not relevant anymore.