Add possibilty to use CSS pseudoclasses and pseudoelements in Selectors

[AndreyBelym]

Are you requesting a feature or reporting a bug?

Feature

What is the current behavior?

Currently you can't create a Selector like Selector(':active') or Selector('.seekbar__knob::before') (#2799)

What is the expected behavior?

You can create Selectors based on pseudoclasses and pseudoelements, or, at least, perform actions on them.

[ZeleniiZmey]

Any update on this?

[javcode]

is there a workaround to do a click in a pseudo element like this? (when the parent is width 0, height 0)
until the actual functionality is implemented?

[valen-tina]

Also interested in this question. I have pseudo element ::after and not sure how to work with it.

[javcode]

My workaround is to create a client function to do the click:
const {Selector, ClientFunction} = require('testcafe');
Then
const closeDialogFunctionInClient = ClientFunction(() => document.querySelector('div.ngdialog-close').click()) .with({ boundTestRun: testController }) ; //because of the bloody ::before pseudo element await closeDialogFunctionInClient();

[AllSidesCreative]

Any update on this?

[AlexKamaev]

We do not have any updates on this issue yet. We still have plans to implement it, however, I can not give any estimates.

[helen-dikareva]

we have a request for support such elements and classes in recorder so we need the implementation in TestCafe too https://github.com/DevExpress/testcafe-studio/issues/2237

[miherlosev]

https://stackoverflow.com/questions/61376783/selecting-pseudo-element-with-testcafe

[lucimart]

Any update on how could I Select a pseudoelement?

[arubtsov]

@lucimart, No updates yet. At this point, the only workaround is to use ClientFunction.

[chaudhryu8]

Please tell if there is any update on this issue, Thanks.

[chaudhryu8]

Please also tell if there is any workaround for this issue.

[Farfurix]

@chaudhryu8

Hello,

Unfortunately, there are no updates yet. You can use ClientFunction as a workaround.

[chaudhryu8]

@AlexSkorkin @Farfurix @javcode @valen-tina I tried above-mentioned workaround but it did not work for me. I am trying to click on a Pseudo element. Please share what modifications you made to above code snippet to make it work for you, Thanks.

[chaudhryu8]

@Farfurix @javcode Please help with resolving above issue, I am not able to completely understand below workaround, Thanks.

My workaround is to create a client function to do the click:
const {Selector, ClientFunction} = require('testcafe');
Then
const closeDialogFunctionInClient = ClientFunction(() => document.querySelector('div.ngdialog-close').click()) .with({ boundTestRun: testController }) ; //because of the bloody ::before pseudo element await closeDialogFunctionInClient();

[Farfurix]

@chaudhryu8

Hello,

We try to keep the GitHub issues tracker for bugs and feature requests only. You can ask your question about ClientFunction on Stack Overflow.

[chaudhryu8]

@Farfurix I have posted this question at https://stackoverflow.com/q/70175904/13801198. Thanks. CC: @AlexSkorkin @javcode @valen-tina

[AlexKamaev]

We discussed this use case with the team and decided to close this issue as we currently have higher-priority tasks.