Skip to main content

How to test if a CSS selector is stable during variant changes

Updated

Pre-requisites

And you need to find a stable selector to add to the Element to monitor field on the Settings

 

How to choose a good selector for monitoring

Choose a selector that

  • Is a parent of the selector you are using to position SmartSize's button
  • Does not change during variant changes

 

How to test if the chose selector does not change

On your product page, open the Developer Tools / Inspect window and go to the tab Console.

Paste the following code in the Console, replacing .your-selector with the selector to test (i.e., the selector to be added to the Element to monitor field):

window.testElement = document.querySelector('.your-selector');
console.log('Original element:', window.testElement);

And hit Enter to run it.

You will see a response like this on the Console:

Now change the variant, by clicking another Size or Color of the product. 

After the variant changed, paste the following code in the Console, again replacing .your-selector with the selector to test:

const newQuery = document.querySelector('.your-selector');
console.log('After variant change:', newQuery);
console.log('Same instance?', window.testElement === newQuery);
console.log('Original still in document?', document.contains(window.testElement));

 

And hit Enter to run it.

If you see a response like this on the Console:

Same instance? true
Original still in document? true

 

Congratulations! The selector you chose is stable during variant changes and is a good choice to use on the Element to monitor field): 

 

Powered by Zendesk