How to select div with pseudoelement ::after in testcafe

Question

I need to click on div with pseudo element ::after.

Div itself is invisible, but after hovering on another element, the div::after append icon at the end of div which I need to click.

How can I create a selector for div::after?

I can perform click in console with jQuery, but I can't do it in testcafe, because I get

Error:'actionElementIsInvisibleError'.

Use selector .more-options::after is not working

score 3 · Answer 1 · answered Apr 12 '19 at 10:59

You have to simulate yourself the hovering effect by 'patching' the style of the targeted div. In other words you have to make it visible by calling a client function that will change the div style. You may find a code sample here : tc-client-function-set-style-attribute

score 0 · Answer 2 · answered Mar 13 '23 at 08:25

I had similar challenge with checkboxes

One of the thing I did is to setting the visibility of the element before clicking it.

ex:

const consent = ClientFunction(() => {
  document.getElementById("agb").style.visibility = "visible";
  document.getElementById("datasecurity").style.visibility = "visible";
});

then call the function and then click on the checkboxes.

How to select div with pseudoelement ::after in testcafe

2 Answers2