selenium webdriver - How to properly translate shadow DOM CSS selectors to non-shadow-DOM selectors -


i want test polymer applications non-shadow-dom capable browsers firefox, phantomjs, , maybe others using webdriver. webdriver commands firefox , phantomjs fail when use

driver.findelement(const by.cssselector('* /deep/ #some-div')); 

are there rules how best translated/approximate these selectors when polyfills can not applied:

  • /deep/
  • ::shadow
  • :host()
  • :host-context()
  • :content

i create function translates such selectors automatically non-shadow-dom selectors browsers don't support them before sending request , need know how translate them.

question bit old, in case haven't figured out yourselves yet.

  • /deep/ (deprecated): said in answer, removing should work in of cases.
  • ::shadow (deprecated): can removed. replacing > might not work if node targeting not immediate child of host element's shadow root.
  • :host() pseudo classes used select custom element inside shadow-dom, in non-supported browsers equal selecting parent child element. since don't have parent selectors in css , writing js conversion, can identify tagname of host element , use instead of :host selector. below:

:host {    opacity: 0.4;    transition: opacity 420ms ease-in-out;  }  :host(:hover) {    opacity: 1;  }  :host(:active) {    position: relative;    top: 3px;    left: 3px;  }  /*convert to*/    x-element {    opacity: 0.4;    transition: opacity 420ms ease-in-out;  }  x-element:hover {    opacity: 1;  }  x-element:active {    position: relative;    top: 3px;    left: 3px;  }

  • :host-context(<selector>) pseudo class matches host element if or of ancestors matches <selector>. example: below rule apply on custom element when it's descendant of element class .different.

:host-context(.different) {    color: red;  }
<body class="different">    <x-foo></x-foo>  </body>

it won't easy replace 1 simple. webcomponents polyfill doesn't attempt it. can't think of css way achieve this.

  • ::content targets distributed child nodes of host element, i.e. elements picked display using content selectors. replacing ::content selectors tagname of host elements should work here. i.e.

::content > h3 {    color: green;  }    /*replace with*/    x-element h3 {    color: green;  }
note have removed child selector > above, because in non-supported browsers after distribution h3 won't direct descendant of x-element anymore. given way content selector used, i'd suggest removing child selector wherever available.


Comments

Popular posts from this blog

java - Custom OutputStreamAppender not run: LOGBACK: No context given for <MYAPPENDER> -

java - UML - How would you draw a try catch in a sequence diagram? -

c++ - No viable overloaded operator for references a map -