TabSentry - How to use Chat GPT to create Selectors for Custom Autofill

Introduction

You can use Chat GPT to find selectors for Custom Autofill. This is useful when our auto-detection for selectors does not detect a certain element or if you are trying to find elements for buttons and other abnormal fields.

Setup & Recommendations

• This guide will assist you in setting up Custom Autofill Feature configurations. Click here to learn more about Custom Autofill.

Copying the Element

1. Navigate to the selector you are trying to find. For this example, I will look for Walmart's discount code selector. 

2. Click into the field, then right-click > inspect.

3. Click the icon with the arrow pointing to the top left inside a box, then click on the field again. This will highlight the element you are looking for.

4. Right-click the highlighted element, then click Copy > Copy Element. 

• Example element: <input id="react-aria-2" type="text" class="w_9iFI" value="">

5. You can find an example video of the entire process of copying an element below.

6. Now that you have the element, you can use chat GPT to create the selector which you can use in with Custom Autofill in TabSentry. 

Using Chat GPT to Create the Selector

1. Create a chat with Chat GPT and paste the prompt below into the chat.

• Where it says, "Describe the purpose of the element," describe what the element refers to. For this Walmart example, I will write, "This is a discount code field on the Walmart checkout page."
• Where it says, "Insert the HTML snippet of the element here," paste in the element you copied above in step 4 of this guide.

I need help converting elements to selectors. The program I am using allows me to use selectors in this format (the selector below does not relate to the element I will send further below; it is an example so you understand what format the program I use is looking for):

div[role="button"][jsname="M2UYVd"]

The elements I need help converting can be found below:

"Insert element here"

"Describe the purpose of the element"

2. Example of my Walmart prompt:

I need help converting elements to selectors. The program I am using allows me to use selectors in this format (the selector below does not relate to the element I will send further below; it is an example so you understand what format the program I use is looking for):

div[role="button"][jsname="M2UYVd"]

The elements I need help converting can be found below:

<input id="react-aria-2" type="text" class="w_9iFI" value="">

This element is Walmart's discount code field. Please convert it to a selector in a format that would work with my program.

3. Chat GPT will convert the element to a selector that works in TabSentry. Below is an example of what your conversation with Chat GPT should look like.

4. You can insert that selector into a Custom Autofill feature configuration. I've included an example of this process below.

5. You have successfully converted an element to a selector.