Find and click every matching element - TestDriver

This test uses findAll() to find every coffee cup in an icon grid, clicks each one, and asserts on the result.

Watch it run

The test

findall-coffee-icons.test.mjs

import { describe, expect, it } from "vitest";
import { TestDriver } from "testdriverai/vitest/hooks";

describe("FindAll Coffee Icons", () => {
  it("should find and click all 4 coffee cup icons", async (context) => {
    const testdriver = TestDriver(context);

    await testdriver.provision.chrome({
      url: "https://v0-random-icon-grid.vercel.app/",
    });

    // Use findAll to locate all coffee cup icons on the page
    const coffeeIcons = await testdriver.findAll("coffee cup icon, there are exactly 4 on the page");

    // Log each icon's coordinates
    console.log(`Found ${coffeeIcons.length} coffee icons:`);
    coffeeIcons.forEach((icon, i) => {
      console.log(`  Icon ${i + 1}: (${icon.x}, ${icon.y}) center=(${icon.centerX}, ${icon.centerY})`);
    });

    // The grid has 4 coffee cups; allow one miss, matching the assertion below
    expect(coffeeIcons.length).toBeGreaterThanOrEqual(3);
    expect(coffeeIcons.length).toBeLessThanOrEqual(4);

    // Click each coffee cup icon
    for (const icon of coffeeIcons) {
      await icon.click();
    }

    // Verify the selection count is displayed
    await testdriver.assert("the page says 'Selected: 3 / 4' or 'Matched 4 of a kind!'");
  });
});

How it works

findAll() returns an array with one element per match.
The description states how many to expect (“there are exactly 4 on the page”).
Each element has its position in x, y, centerX, and centerY.
Each element has its own click(), so a for...of loop clicks them in turn.
The test and assertion accept 3 or 4 matches, so one missed icon doesn’t fail the run.

Run it

The test is in the TestDriver SDK repository. Clone it, install dependencies, and run the file:

git clone https://github.com/testdriverai/testdriverai
cd testdriverai
npm install
npx vitest run examples/findall-coffee-icons.test.mjs

The test reads your API key from TD_API_KEY. Create a key at console.testdriver.ai/team/api-keys. Then set it in your environment or a .env file.