1

How do I convert the selector string that I copy from chrome by using Inspect > Copy > Copy Selector to something that I can use inside of a testCafe Selector?

Chrome gives me this:

body div#root div div.fullindy div.container div.row div.col-md-8 div form div.bd-graybackground.padding-64 div.row div.col-md-6 div.row div.col-md-6 div div.form.form-group div.css-10nd86i.clickable.normal-subheader div.css-1aya2g8 div.css-1rtrksz div.css-va7pk8

This does not return css-va7pk8 selector object that has a text value that I need to check.

This works: 

Selector('form').find('.row').sibling().sibling(3).child(1).find('.row').child().find('div').child(1);

But this is very time consuming trying to figure out how to traverse a complex DOM. There has to be a faster way using the available features of Chrome and testCafe.

Alex Skorkin
  • 4,264
  • 3
  • 25
  • 47
user2683989
  • 11
  • 1
  • 1
    I would expect the structure of the selector copied from DevTools to look more like `#question-header > h1 > a`. Also displaying `body div#root` instead of just starting at `#root` is strange. Can you confirm that you're following the steps in this answer?: https://stackoverflow.com/a/45078286/3456826 – lostlemon Sep 26 '19 at 14:37
  • That is exactly how I am doing it. Some times it includes body but most of the time it starts with #root – user2683989 Sep 26 '19 at 18:15

1 Answers1

3

You can use the whole css selector string as a TestCafe Selector constructor parameter:

    await t.click(Selector(`body div#root div div.fullindy div.container div.row 
div.col-md-8 div form div.bd-graybackground.padding-64 div.row div.col-md-6 
div.row div.col-md-6 div div.form.form-group div.css-10nd86i.clickable.normal-subheader 
div.css-1aya2g8 div.css-1rtrksz div.css-va7pk8`));
wentwrong
  • 711
  • 4
  • 7
Dmitry Ostashev
  • 2,305
  • 1
  • 5
  • 21