Mastering Selectors in CheckView

Selectors are a key component in CheckView’s testing workflows, allowing the platform to interact with specific elements on your site.
Selectors tell the CheckView bot which elements on a webpage to interact with, like buttons or fields. They use CSS or XPath to target specific parts of the page. Accurate selectors are important because changes to your website’s code can cause tests to fail. Tools like browser developer tools or SelectorHub can help you find reliable selectors. CheckView also supports fallback selectors to handle changes automatically.

Generated Form Test Flows

CheckView attempts to automatically define the correct selectors for your form plugin and specific form. It prioritizes using the most unique selector available, such as an HTML ID. If an ID is unavailable, CheckView will try to use a unique CSS class that is stable and unlikely to change over time.

However, CheckView may not always locate the ideal selector, especially for customized forms or templates with overrides. In these cases, you can adjust selectors manually when:

  • Errors occur in the test flow.
  • Steps are missing.
  • You’re building custom test flows with unsupported form fields, form plugins or even non-form plugins like learning management system (LMS) plugins, another e-commerce platform, membership plugins and more.

To make these changes, use the Selector field on each step and input a valid CSS or XPath selector.

CSS Targeting

What is CSS and How Can It Be Used for Targeting?

CSS (Cascading Style Sheets) selectors are used to target HTML elements in your document. With CheckView, CSS selectors are commonly used to pinpoint specific form fields, buttons, or other interactive elements.

Best Practices for CSS Selectors:

  1. Use IDs When Possible: An element with an ID is unique on the page, making it the most reliable selector.
  2. Fallback to Classes: Use CSS classes if an ID is unavailable. Ensure the class is specific to the element and not shared across unrelated elements.
  3. Avoid Overly Complex Selectors: If a selector is excessively long (e.g., nested selectors like div > ul > li:nth-child(2) > input), it may break if your site’s structure changes.

How to Generate CSS Selectors Using Chrome DevTools:

  1. Open Chrome DevTools (right-click on the element and select Inspect).
  2. Right-click on the highlighted element in the HTML structure (make sure you have the right element selected).
  3. Select Copy > Copy Selector.
  4. Paste the copied selector into CheckView.

Pro Tip: If the generated selector is long or seems unstable, consider creating a custom CSS selector. You can use Chrome extensions like SelectorsHub to generate optimized CSS paths or explore alternative selection options.

Using Multiple Selectors for Resilience

The Selector field in CheckView supports multiple selectors separated by commas. If the first selector fails (e.g., due to say a theme or plugin update), CheckView will automatically try the next selector in the list.

  • Why This Is Useful: In WooCommerce, you might use a custom ID for a checkout field, but as a fallback, include WooCommerce’s default ID or class for the same field. This ensures your tests are robust against changes.
  • Pro Tip: Always have a backup selector for critical steps, especially if you’ve customized WooCommerce checkout fields or use third-party plugins.

XPath Targeting

What is XPath and How Is It Used?

XPath (XML Path Language) is another method to locate elements in your HTML. Unlike CSS, XPath can navigate an element’s structure and relationships, allowing for highly specific selections.

Strengths of XPath:

  • Can locate elements without IDs or classes by traversing the DOM structure.
  • Useful for selecting elements based on attributes, text, or hierarchical position.

Caveats of XPath:

  • XPath expressions can be complex to learn and harder to maintain than CSS selectors.
  • Small changes in the DOM structure can break an XPath selector.

How to Generate XPath Selectors Using Chrome DevTools:

  1. Open Chrome DevTools and inspect the target element.
  2. Right-click on the element in the HTML structure.
  3. Select Copy > Copy XPath (not full XPath in most cases).
  4. Paste the copied XPath into CheckView.

Pro Tip: Use tools like SelectorsHub to generate optimized XPath expressions if Chrome’s default suggestions are suboptimal.

Maintaining Custom Selectors

When using custom selectors not generated by CheckView, keep the following in mind:

  • Changes to your site’s structure (e.g., theme updates, plugin modifications) may cause test flows to break.
  • Regularly review and update custom selectors if you notice failed steps caused by structural changes.
  • Document custom selectors and their intended targets to streamline updates and maintenance.

Predefined WooCommerce Selectors

CheckView includes a library of predefined selectors designed to target standard WooCommerce elements. These selectors are optimized to work with WooCommerce’s default structure, ensuring smooth interactions during test flows like cart additions and checkout processes.

How It Works:

  • Predefined selectors are used by default in all WooCommerce test flows.
  • If your WooCommerce setup uses custom themes, overrides, or third-party plugins, you can switch to custom selectors for individual steps.

Switching to Custom Selectors

  1. In the Test Editor, click the Use a Custom Selector button on the relevant step.
  2. Enter your custom CSS or XPath selector into the provided field.

Pro Tip: Include fallback selectors (e.g., WooCommerce defaults) alongside your custom ones to prevent false positives caused by structural changes.

Final Tips for Using Selectors Effectively

  1. Start Simple: Always try to use the simplest and most specific selector (e.g., IDs or unique classes).
  2. Leverage Tools: Use Chrome DevTools or extensions like SelectorsHub for efficient selector generation.
  3. Validate: Test your selectors in DevTools before adding them to CheckView to confirm accuracy.
  4. Plan for Resilience: Use multiple selectors or fallback options for critical test steps to reduce failures caused by future changes.

By mastering selectors, you can create robust and reliable test flows that adapt to changes in your site’s structure each time CheckView runs a new test.

Docs