[💡 Feature]: Allow second parameter to getCSSProperty to target pseudo elements, e.g. '::after'

[nikolajl]

Is your feature request related to a problem?

I need to check a css style that is implemented as pseudo element ::after.

In the browser this is possible using window.getComputedStyle(element, '::after'). However, there is not an obvious way to do this in on the Element in WebdriverIO.

Under the hood, getCSSProperty() uses getComputedStyle, but only allows 1 parameter. Allowing a second parameter would be an obvious simple solution.

Describe the solution you'd like.

Add second parameter to getCSSProperty()

Example:

const contentAfter = await $('#selector').getCSSProperty('content', '::after')

Parameter would be added here.

webdriverio/packages/webdriverio/src/commands/element/getCSSProperty.ts

Line 73 in f858411

export default async function getCSSProperty (

export default async function getCSSProperty (
    this: WebdriverIO.Element,
    cssProperty: string,
    pseudoElement?: string // or '::before' | '::after'
) {

and then passed on to this one:

webdriverio/packages/devtools/src/scripts/getElementCSSValue.ts

Line 5 in f858411

return (window.getComputedStyle(elem) as any)[propertyName]

export default function getElementCSSValue (_: HTMLElement, elem: HTMLElement, propertyName: string, pseudoElement?: string ): string {
    return (window.getComputedStyle(elem, pseudoElement) as any)[propertyName]
}

Describe alternatives you've considered.

No response

Additional context

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[christian-bromann]

Thanks for proposing the idea @nikolajl! I think the structure you suggest works out, maybe we can be a bit more stricter about the pseudo element strings? So rather than defining it as string, we could list '::after' | '::before' | etc.

Any contributions that implements this suggestion are highly appreciated. Please take a look into our contribution guidelines and let us know if you have any questions. Cheers!

[Andrewnt219]

Hi @christian-bromann, I want to help with this issue.

[christian-bromann]

Awesome, let me know if you have any questions.

[Andrewnt219]

@christian-bromann the geElementCssValue gets its type from an ignored d.ts file. Even if I change the file, it doesn't affect the type anyway. I tried adding types to both the getElementCssValue in packages/devtools/src/commends but that didn't work either. How should I type the third parameter?

c2.png">

[christian-bromann]

it doesn't affect the type anyway.

You can generate types via npm run generate:typings, see also https://github.com/webdriverio/webdriverio/blob/main/CONTRIBUTING.md#typescript-definitions

[Andrewnt219]

Thanks. I misunderstood that the script will change base on TypeScript, but I actually have to go inside the JSON file and update the type.

EDIT: I can't solve this, PR welcome.

[Pawel1894]

@christian-bromann I guess this can be closed? 😄

[christian-bromann]

Yes, thanks @Pawel1894 for working on this 👏