Features/protractor locator

[jan-molak]

Hi again, @Georgegriff !

I've prepared a simple Angular Protractor plugin that addresses #33 and should integrate nicely with Serenity/JS I'm the author of, and which uses Protractor under the hood.

So starting from the outside, a person using Angular Protractor would need to configure their test runner in their protractor.conf.js to use the query-selector-shadow-dom/plugins/protractor Protractor plugin:

    plugins: [{
        package: 'query-selector-shadow-dom/plugins/protractor'
    }],

You'll see this demonstrated in the end-to-end test I've added (see test/protractor-locator.e2e.js and protractor.conf.js)

The plugin (at plugins/protractor/index.js) follows a very similar pattern you've already established for Playwright.

Since both Serenity/JS and Protractor are written in TypeScript I've also added a plugins/protractor/index.d.ts file that describes the new method that the plugin registers on Protractor's by object.

There's a couple of things I wasn't sure of, so would appreciate your feedback on.

• I didn't notice e2e tests for Playwright or Codecept, so I've added the one for Protractor under test/. I'm not sure if you're happy with this location or if I should move that file somewhere else?
• I've added npm run e2e:protractor to the CI config too, but not to regular npm test since that might interfere with running Karma in watch mode.
• The way that e2e test generates shadow root components is a bit primitive since Protractor doesn't support pre-processors like Karma does and I couldn't re-use your test helpers.
• I've called the protractor locator by.shadowDomCss, which may or may not be the best name for it. I've considered by.shadowCss but that didn't seem correct (it's a shadow DOM, not a shadow CSS after all) and by.querySelectorShadowDom, but that seemed a bit wordy.
• I had to update Travis config to use Node 10, Xenial and an XVFB service to make it work with the latest chromedriver

If you find this PR too large or out of scope for this project please let me know and I can release it as a separate lib with a dependency on yours, I don't mind.

Looking forward to hearing your thoughts!

Jan

[codecov[bot]]

Codecov Report

Merging #34 into master will not change coverage. The diff coverage is n/a.

@@            Coverage Diff            @@
##            master       #34   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files            1         1           
  Lines           61        61           
=========================================
  Hits            61        61           

---

Continue to review full report at Codecov.

Legend - Click here to learn more Δ = absolute <relative> (impact), ø = not affected, ? = missing data Powered by Codecov. Last update 6038fb0...adb15af. Read the comment docs.

[jan-molak]

Hey @Georgegriff! Thanks for your feedback, I'm glad you're happy with this PR :-) I've added an example to the readme and am planning to write a short tutorial to demonstrate how to use Serenity/JS with query-selector-shadow-dom as soon as the new version of this lib lands in NPM.

I'd be happy to submit another PR linking to the article from the readme if you'd like?

[Georgegriff]

Yeah any more documentation more than welcome