I am trying to debug a testcafe test with node from VSCode and want to verify that the selector used in the code identifies the correct element and retrieve the values of the variables that is declared in a function / variable assigned with a selector.

I start the test.js file in debug mode with command: "C:\Program Files\nodejs\node.exe" --inspect-brk=21496 testcafe.js chrome tests.js --env=dev --skip-js-errors

The test stop at the breakpoint and when the below line is reached, i wanted to verify what exactly is inside that variable (element) such that i can verify if the selector is selecting the desired element.

let element= Selector(".unique_selector_class").parent(2);

I expect to find the properties of the selected element in the debug mode. e.x., length of the 'element' if its an array, outertext of the element.

Update: I think what i said earlier was little confusing. I have a method like this which is called by a test.

`async deleteSelectedComponentsMethod() 
{ 
  let element = await Selector(".uniqueSelectorClass"); 
  let numberOfSelectedComponents = element.length; 
  for (let i = 0; i < numberOfSelectedComponents; i++) 
  { 
     await t.click(deleteSelectedComponent.nth(i)); 
  } 
}`

In this method i wanted to see what is inside the variable 'element', so that i can write a logic as in the code. PS: the element am trying to identify will be visible only when the mouse is hovered.

The value in the variable 'element' returns a function that does not help to find the runtime values in the element

1 Answers

2
Andrey Belym On

UPDATE:

Selector doesn't return an array when multiple elements match it. Use await selector.count to retrieve the number of matched elements and selector.nth() to enumerate them:

async deleteSelectedComponentsMethod() 
{ 
  let element = Selector(".uniqueSelectorClass"); 
  let numberOfSelectedComponents = await selector.count; 
  for (let i = 0; i < numberOfSelectedComponents; i++) 
  { 
     await t.click(deleteSelectedComponent.nth(i)); 
  } 
}

Read more about the selector.count property in the Using Selectors article.

ORIGINAL ANSWER:

You can use the await keyword to retrieve information about elements represented by Selectors. Once we will implement this feature: #3244, you will be able to debug Selectors by typing selector expressions in the browser console.