Selectors lab

Every selector a tester needs to know, in one place. Pick a mode, type a selector, see the matches highlighted live. When you feel confident, hit the Challenges tab and prove it on 12 graded problems.

Your selector

Type a selector to see live matches.

Sample HTML

<section aria-label="Featured products">
    <article class="product" data-sku="UPI-001">
      <h2>UPI Power Bank</h2>
      <p class="price">₹ 1,499</p>
      <button data-testid="buy" data-sku="UPI-001">Buy now</button>
    </article>
    <article class="product on-sale" data-sku="JR-007">
      <h2>JBL Earbuds</h2>
      <p class="price">₹ 2,299</p>
      <button data-testid="buy" data-sku="JR-007">Buy now</button>
    </article>
    <article class="product" data-sku="MI-042">
      <h2>Mi Smart Bulb</h2>
      <p class="price">₹ 599</p>
      <button data-testid="buy" data-sku="MI-042" disabled>Out of stock</button>
    </article>
  </section>

<form id="newsletter" aria-label="Newsletter signup">
    <label>Email <input type="email" name="email" required /></label>
    <label>Mobile <input type="tel" name="phone" /></label>
    <button type="submit">Subscribe</button>
  </form>

Matched markup

<main class="catalog" data-page="home"> <nav id="primary"> <a href="/" data-id="home">Home</a> <a href="/sale" data-id="sale" class="hot">Sale</a> <a href="/cart" data-id="cart">Cart (3)</a> </nav> <section aria-label="Featured products"> <article class="product" data-sku="UPI-001"> <h2>UPI Power Bank</h2> <p class="price">₹ 1,499</p> <button data-testid="buy" data-sku="UPI-001">Buy now</button> </article> <article class="product on-sale" data-sku="JR-007"> <h2>JBL Earbuds</h2> <p class="price">₹ 2,299</p> <button data-testid="buy" data-sku="JR-007">Buy now</button> </article> <article class="product" data-sku="MI-042"> <h2>Mi Smart Bulb</h2> <p class="price">₹ 599</p> <button data-testid="buy" data-sku="MI-042" disabled>Out of stock</button> </article> </section> <form id="newsletter" aria-label="Newsletter signup"> <label>Email <input type="email" name="email" required /></label> <label>Mobile <input type="tel" name="phone" /></label> <button type="submit">Subscribe</button> </form> <footer> <img src="/badges/upi-certified.png" alt="UPI certified merchant" /> <img src="/badges/iso-9001.png" /> </footer> </main>

Selectors are step one

Now build the framework that uses them.

Selectors are the alphabet. The Pro Software Testing & Automation program walks you through writing the first sentence, then the first page object, then a full pytest + Selenium framework running on GitHub Actions. 31 phases. Selectors live in Phases 9, 14 and 27 with graded labs.

Start the free Pro program →Or read a sample lesson first