javascript error: "id" is required (Session info: chrome=95.0.4638.54)

kailin0512 commented 3 years ago

Hi, I am trying out this library, I don't see many examples for this library, so I was wondering whether my implementation is correct? I am using webdriverio V7 in Sync mode

const { setupBrowser } = require('@testing-library/webdriverio');
describe('Sample ebay', () => {
    it('should have ebay search button', () => {
        browser.url(`https://www.ebay.com`);
        setupBrowser(browser);
        const element = browser.getByRole('button', {
            name: /search/i
          });

        // expect($('#gh-logo')).toBeExisting();
        expect(element).toBeExisting();        
    });
});

it gives me this error:

chrome 95.0.4638.54 mac os x #0-0] 1) Sample ebay should have ebay logo
[chrome 95.0.4638.54 mac os x #0-0] javascript error: "id" is required
  (Session info: chrome=95.0.4638.54)
[chrome 95.0.4638.54 mac os x #0-0] javascript error: "id" is required
[chrome 95.0.4638.54 mac os x #0-0]   (Session info: chrome=95.0.4638.54)
[chrome 95.0.4638.54 mac os x #0-0]     at processTicksAndRejections (internal/process/task_queues.js:95:5)
[chrome 95.0.4638.54 mac os x #0-0]     at async injectDOMTestingLibrary (/Users/kailin/Desktop/work/opensource/webdriverio-debug/node_modules/@testing-library/webdriverio/dist/index.js:38:9)
[chrome 95.0.4638.54 mac os x #0-0]     at async Object.getByRole (/Users/kailin/Desktop/work/opensource/webdriverio-debug/node_modules/@testing-library/webdriverio/dist/index.js:144:9)
[chrome 95.0.4638.54 mac os x #0-0]     at Browser.next [as getByRole] (/Users/kailin/Desktop/work/opensource/webdriverio-debug/node_modules/@wdio/utils/build/monad.js:149:33)
[chrome 95.0.4638.54 mac os x #0-0]     at Context.<anonymous> (/Users/kailin/Desktop/work/opensource/webdriverio-debug/test/specs/ex2.e2e.js:6:33)

Any help will be much appreciated!

kailin0512 commented 3 years ago

Minimum reproducible example: https://github.com/kailin0512/webdriverio-debug

olivierwilkinson commented 3 years ago

Hi 👋

Thanks for raising this! The repro also helped me track down the issue a lot so thanks 😁 I've just raised a PR which I think fixes the issue.

To find elements using Dom Testing Library we need to inject it into the browsing context using it's UMD distribution. The distrubution was checking to see if there was a define function available to load the library with, which there is on ebay.com. This meant that the library was failing to load, I'm not sure why, maybe it wasn't the correct define function? Either way this library relies on it loading in a different way anyways, so it was going to fail later even if it succeeded.

I've fixed the probelm by ensuring that the dist always loads in the way this library expects it to, which means ignoring define functions in the browsing context.

Unfortunately it looks like the GitHub Actions workflow is not working right now so I'll release the fix once I've sorted that tomorrow!

kailin0512 commented 3 years ago

Hi @olivierwilkinson

Thanks for your fast response & detailed explanations! I will also help to verify it after rolling out!

olivierwilkinson commented 3 years ago

Hi @olivierwilkinson

Thanks for your fast response & detailed explanations! I will also help to verify it after rolling out!

No worries at all 😁

I'm busy during the day today but will get on fixing the workflow tonight if I can 👍

github-actions[bot] commented 3 years ago

:tada: This issue has been resolved in version 3.0.5 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

olivierwilkinson commented 3 years ago

@kailin0512 I fixed the workflow yesterday btw. Let me know if you still find the same error and I'll reopen this issue.

Let me know if you find any other issues! 😁

testing-library / webdriverio-testing-library

javascript error: "id" is required (Session info: chrome=95.0.4638.54) #34