Skip to content

Release 1.3.0 - shadow dom, elements mapping, find by js, enhanced executeScript
Compare
Choose a tag to compare
@alex-popov-tech alex-popov-tech released this 09 Apr 10:36
· 34 commits to master since this release
1.3.0
0bc6c1d

New Features

  • executeScript improvements:
    • browser.executeScript(...) and element.executeScript(...) - now accepts not plain string/Function - but brand new ones:
      • browser.executeScript - now accepts (document, args, window) => ... function, where:
        • document - is Document
        • args - is an array of passed additional arguments, like browser.executeScript((document, args) => args[0] === 'foo' && args[1] === 'bar', 'foo', 'bar')
        • window - is Window
      • element.executeScript - now accepts (element, args, window) => ... function, where:
        • element - is HTMLElement which corresponds to element's actual WebElement
        • args - is an array of passed additional arguments, like element.executeScript((element, args) => args[0] === 'foo' && args[1] === 'bar', 'foo', 'bar')
        • window - is Window 
          // assume dom looks like
// <body>
//   <span>first</span>
//   <div>
//     <span>second</span>
//     <span>third</span>
//   </div>
// </body>

const text = await browser.executeScript(document => document.getElementsByTagName('span')[0].innerHTML);
console.log(text); // 'first item'

const texts = await browser.element('div').executeScript(
  (element, args) => {
    var spans = element.getElementsByTagName('span');
    var textOne = spans[0].innerHTML;
    var textTwo = spans[1].innerHTML;
    return [args[0], textOne, textTwo];
  },
  'first'
);
console.log(texts); // ['first', 'second', 'third']
    • all new arguments for executeScript function are typed, so if you use Typescript - you will be able to use full completion inside passed function right in your IDE
  • you can now find elements not only with string (which is xpath or css) or By, but using js function also: 
          // assume dom looks like
      // <body>
      //   <span>first</span>
      //   <div>
      //     <span>second</span>
      //     <span>third</span>
      //   </div>
      // </body>

      const body = browser.element({ script: document => document.body });
      const div = body.element({ script: element => element.getElementsByTagName('div')[0] });
      const spans = div.all({ script: element => element.getElementsByTagName('span') });
      console.log(await spans.get(their.texts)); // ['second', 'third']
  • Shadow DOM support: 
          // assume dom looks like
      // <body>
      // ...shadowRoot...
      //   <span>first</span>
      // ...shadowRoot...
      // </body>

      const span = browser.element('body').shadow.element('span');
      console.log(await span.get(its.text)); // 'first'
  • mapping collection elements to inner (relative) elements: 
          // assume dom looks like
      // <body>
      //  <div>
      //    <span>first</span>
      //    <span>second</span>
      //  </div>
      //  <div>
      //    <span>third</span>
      //    <span>fourth</span>
      //  </div>
      // </body>

      const firstSpans = browser.all('div').collected(it => it.element('span'));
      console.log(await firstSpans.get(their.texts)); // ['first', 'third']

      const allSpans = browser.all('div').collected(it => it.all('span'));
      console.log(await allSpans.get(their.texts)); // ['first', 'second', 'third', 'fourth']
Assets 2
Loading