Search code examples
appiumpseudo-elementwebdriver-ioappium-androidwdio-jasmine

How to get pseudo elements in WebdriverIO+Appium

I want to get a value (content) from the CSS of a pseudo element (::before) while inside a test made using WDIO and Appium for an Android hybrid app because the designer has stored the current responsive-design state there. So my tests would know which layout (elements) to expect.

Multiple answers to related questions (1; 2; 3) indicated that using .getComputedStyle() might be the only solution. But this does not seem to work in my tests. The error is window is not defined for window.getComputedStyle(...) or document is not defined if I use document.defaultView.getComputedStyle(...). Also selectors themselves can't address pseudo-elements it seems.

Example of one of my many attempts:

document.defaultView.getComputedStyle($('body'),'::before').getPropertyValue('content')

Question: Do I need to somehow import window or document to my test? Is there some other way to get window or document from inside the test?

Ultimately: how can I get the content value of ::before of the <body> of a hybrid Android app?

Solution

  • Thanks to Jeremy Schneider (@YmerejRedienhcs) & Erwin Heitzman (@erwinheitzman) for help!

    One solution is to use the execute function:

    let contentMode = browser.execute(() => {
  let style = document.defaultView.getComputedStyle(document.querySelector('body'),'::before');
  return style.getPropertyValue('content')
});

    Alternatively maybe something could also be done with getHTML.