Skip to main content
added 7 characters in body
Source Link

Explaining a bit more on how you can make your selector robust

Bad selector

If this is the selector you use is of the form

.content > table > tbody > tr:nth-child(2) > td.cell > input#email

And the input is moved out of table or even moved a cell, the selector breaks

Goodish selector

But if the selector was

.content input#email

Then it would work even if the input box was moved out of the table or adjusted within the table

Best selector

I'd usually use the most minimal selector though (best one)

input#email

This would be robust enough to handle any DOM changes unless there were

  • the element would change its ID (existential change that has to be accommodated for in the tests)
  • two input boxes for email with the same ID (non-case, IDs need to be unique)

Explaining a bit more on how you can make your selector robust

Bad selector

If this is the selector you use is of the form

.content > table > tbody > tr:nth-child(2) > td.cell > input#email

And the input is moved out of table or even moved a cell, the selector breaks

Goodish selector

But if the selector was

.content input#email

Then it would work even if the input box was moved out of the table or adjusted within the table

Best selector

I'd usually use the most minimal selector though (best one)

input#email

This would be robust enough to handle any DOM changes unless there were

  • the element would change its ID (existential change that has to be accommodated for in the tests)
  • two input boxes for email with the same ID (non-case)

Explaining a bit more on how you can make your selector robust

Bad selector

If this is the selector you use

.content > table > tbody > tr:nth-child(2) > td.cell > input#email

And the input is moved out of table or even moved a cell, the selector breaks

Goodish selector

But if the selector was

.content input#email

Then it would work even if the input box was moved out of the table or adjusted within the table

Best selector

I'd usually use the most minimal selector though (best one)

input#email

This would be robust enough to handle any DOM changes unless there were

  • the element would change its ID (existential change that has to be accommodated for in the tests)
  • two input boxes for email with the same ID (non-case, IDs need to be unique)
Source Link

Explaining a bit more on how you can make your selector robust

Bad selector

If this is the selector you use is of the form

.content > table > tbody > tr:nth-child(2) > td.cell > input#email

And the input is moved out of table or even moved a cell, the selector breaks

Goodish selector

But if the selector was

.content input#email

Then it would work even if the input box was moved out of the table or adjusted within the table

Best selector

I'd usually use the most minimal selector though (best one)

input#email

This would be robust enough to handle any DOM changes unless there were

  • the element would change its ID (existential change that has to be accommodated for in the tests)
  • two input boxes for email with the same ID (non-case)