[How-to]: Ensure that target getComputedStyle ?

[rfreydi]

Hi all,

I was wondering how could I be able to run getComputedStyle on a DOM element.

My test case is that I have a DOM element that have a backgroundImage on :after and I need to ensure that it will keep this particular background (for the moment I'm just trying to get my code checking that the backgroundImage property is present).

I tried to get access to the cssValue through ElementFinder but didn't find a way to specify the pseudoElement.

Here is what I implemented and I'm stuck with async/await management. I wanted to create a useful expectation as I'll have other use case where I need to check css value equal X, contains Y, ...

class HomeLpo {
  static body = Target.the('Home body').located(by.css('app-home .body'));
}

const hasComputedStyle = (key: string, pseudoElt: string | null = null) => {
  const name = 'have computed style + (pseudoElt ? ' on ' + pseudoElt : '') + ' ';

  return {
    present: () => Expectation.thatActualShould<string, ElementFinder>(name + 'present', key)
      .soThat(async (target, property) => {
        const style = await browser.executeScript(`window.getComputedStyle(${target}, ${pseudoElt})`);
        return style && !!style[property];
      })
  };
};

Then('my test', actorInSpotlight().attemptsTo(
  Ensure.that(HomeLpo.body, hasComputedStyle('backgroundImage', ':after').present())
));

I saw that there is a PR that was speaking about managing async expectation, but the branch is not merged yet because of conflict: #553

Does my approach to solve my issue is wrong ?
How could I manage this particular use case ?

Thank you in advance for the help provided !

[jan-molak]

Hi @rfreydi!

A more idiomatic way would be to do any computations in the Question rather than in the Expectation. I'd also suggest using the ability to BrowseTheWeb rather than relying on the global browser object.

I'd approach it this way:

import { Question } from '@serenity-js/core';
import { ElementFinder } from 'protractor';

const ComputedStyle = (target: Question<ElementFinder>, property: string, pseudo?: string) =>
    Question.about(`computed style ${property}${ pseudo || '' } of ${ target }`, actor =>
        BrowseTheWeb.as(actor).executeScript(
            `return window.getComputedStyle(arguments[0], arguments[1])`,
            target.answeredBy(actor),
            pseudo
        ).then(style => style && style[property])
    );

You could then compose it like this:

actorCalled('Alice').attemptsTo(
    Ensure.that(ComputedStyle(HomeLpo.body, 'backgroundImage', ':after')), includes('my-background-image.png'))
)

Of course, if you don't care about what image is used for the background, and want to focus on whether or not some background is set, you can make the question return a boolean and then assert on the value using isTrue or isFalse.

Does this help?

[rfreydi]

Nice approach, it remove the need to handle myself isPresent, includes, equals...

Btw tried to implement it but got an infinite loop of Promise...

You can find a playground here: https://github.com/rfreydi/serenity-cumputed-style

[rfreydi]

Okey, I managed to make it work:

export const ComputedStyle = (target: Question<ElementFinder>, property: string, pseudoElt: string | null = null) =>
  Question.about(`computed style ${ property } of ${ target }${ pseudoElt || '' }`, actor =>
    target.answeredBy(actor).getWebElement().then(element =>
      BrowseTheWeb.as(actor).executeScript(
        `window.getComputedStyle of ${ target }${ pseudoElt || '' }`,
        `return window.getComputedStyle(arguments[0], arguments[1])`,
        element,
        pseudoElt
      )
    ).then(style => style && style[property])
  );

But I have an issue with getComputedStyle, it return an array where in Chrome browser it's a CSSStyleDeclaration which is returned...