Click a button by its label

Click Sign In on an empty login form and assert that a validation error appears.

This test clicks Sign In on an empty login form and asserts that a “fields required” error appears.

Watch it run

The test

click-button.test.mjs

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

describe("Hover Text Test", () => {
  it("should click Sign In and verify error message", async (context) => {
    const testdriver = TestDriver(context);
    await testdriver.provision.chrome({ url: 'http://testdriver-sandbox.vercel.app/login' });

    // Submit the login form without filling it in
    const signInButton = await testdriver.find(
      "Sign In, black button below the password field",
    );
    await signInButton.click();

    // Assert that an error shows that fields are required
    const result = await testdriver.assert(
      "an error shows that fields are required",
    );
    expect(result).toBeTruthy();
  });
});

How it works

• The find() description gives the button’s label, look, and position (“black button below the password field”).
• click() clicks the returned element. It throws if find() didn’t locate it.
• assert() describes the error in plain language, so the test doesn’t depend on exact wording or markup.

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/click-button.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.

Related

• find()
• click()
• assert()