How to Find CSS Selectors for Your Tests

With Magic Inspector, you can write automated tests without dealing with CSS selectors in most cases. However, there may still be rare occasions where you need to manually create or modify CSS selectors. For those cases, this guide will walk you through the process of finding and constructing effective selectors.

Step-by-Step Guide to Finding CSS Selectors

Step 1: Open the Browser Developer Tools

The first step in finding CSS selectors is to use your browser's Developer Tools:

1. Open the webpage you want to test in your preferred browser (in this guide we'll use Chrome).
2. Right-click on the page and select "Inspect" or "Inspect Element" from the context menu.
3. This will open the Developer Tools panel, typically on the right side or bottom of your browser window.

Step 2: Select the Web Element

Now that you have the Developer Tools open, you can easily select the element you want to create a selector for:

1. In the Developer Tools panel, click on the element selector tool (usually an icon that looks like a cursor over a square).

2. Move your cursor over the webpage and click on the element you want to select on the page.

3. The corresponding HTML for that element will be highlighted in the Developer Tools panel.

Step 3: Extracting the selector

The easy way

In some cases, if the element has obvious unique attributes, you can simply right click on the element and select "Copy selector" from the context menu.

Then you can paste the selector into the instruction in Magic Inspector directly.

Although it's simple, this method is not always reliable because the copy selector option may return a selector that is not unique or not working.

The hard way

When the copy selector method does not work you have to analyze the element's HTML structure and attributes manually.

With the element selected, examine its HTML structure and attributes:

1. Look for unique identifiers such as id, name, data-test-id or other relevant attributes.
2. Check if the element has any classes and consider using them (only if they are unique).
3. If the element is nested, consider using the parent-child relationship to create a more specific selector.

Step 4: Construct the CSS Selector

Based on the information you've gathered, you can now construct a CSS selector:

1. If the element has an id, use #id-value (e.g., #username-input).
2. For elements with a unique name, use [name="name-value"] (e.g., [name="login-form"]).
3. If using classes, start with .class-name (e.g., .submit-button).
4. If you're targeting a nested element, use the parent-child relationship to create a more specific selector (e.g., #login-form > input[name="password"]).

Step 4: Test the CSS Selector

Refer to this guide to learn how to test with CSS selectors in Magic Inspector. Test your selector and see how it works. If the test fails, you may need to refine your selector.

Examples of CSS Selectors

Here are some common patterns for CSS selectors:

• ID: #login-button
• Class: .nav-item
• Attribute: [data-test-id="user-profile"]
• Combination: button.primary[type="submit"]
• Child: form > input[name="password"]
• Descendant: #user-form input[type="email"]

Best Practices

1. Use CSS selectors only when Magic Inspector fails to find the element with the default AI-powered selectors.

2. When you have no other choice but to use CSS selectors for your tests, keep these tips in mind:

• Aim for uniqueness to ensure your tests are targeting the correct elements.
• Prefer IDs and data attributes over classes, as they're less likely to change with style updates.
• Keep selectors as short and simple as possible while still being unique.
• Avoid using overly specific selectors that rely on the exact structure of the DOM.