In some cases, depending on the structure of your website, when you create an A/B Test and apply certain changes to a specific element, the changes won’t be visible when testing the experiment live.
If that is the case, then one solution is that to replace the selector created by our platform with the direct selector of the element you want to change.
How to change the selectors
Step 1. Obtain the selector of the element
While on your website, open the Developer Tools, either by pressing Ctrl+Shift+I or by pressing the 3 dots next to your Account, then go to More Tools, and finally Developer Tools.
You can also do this by right-clicking on the page and pressing the Inspect button.
Once the console opens, go to the Elements tab.
Now press on the Elements Inspector button. This will allow you to hover your mouse cursor over any element on the website and inspect it.
If you click on the element, it will get highlighted in the Elements tab on the console.
Go to the highlighted element in your console, right-click on it and select Copy, then Copy selector.
Step 2. Save the selector
Paste it into a Notepad file, or any other app you are using, in order to easily have access to it.
Step 3. Apply the selector in the experiment
Access the experiment where your change did not apply, and in the Variation section, press the </> Code button for the Variation.
Delete the selector of the element created by the platform as highlighted in the picture below and replace it with the direct selector of the element you saved.
After doing so, it should look like this (without the red line highlighting it).
- Click Save in the </> Code window and then Publish your experiment.
Please keep in mind that for every change you make, you must wait 4 – 5 minutes until it will be visible – live – on your website. You can skip this waiting time by using the extension Bypass cache feature or by using Incognito.
