Type into a form

Type into a login form and assert on the validation message for a missing password.

This file has two login form tests. One types a username and checks the field. The other submits without a password and checks the browser’s validation message.

Watch it run

The test

type.test.mjs

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

describe("Type Test", () => {
  it("should enter standard_user in username field", async (context) => {
    const testdriver = TestDriver(context);
    await testdriver.provision.chrome({ url: 'http://testdriver-sandbox.vercel.app/login' });

    const usernameField = await testdriver.find(
      "Username, input field for username",
    );
    await usernameField.click();
    await testdriver.type("standard_user");

    const result = await testdriver.assert(
      'the username field contains "standard_user"',
    );
    expect(result).toBeTruthy();
  });

  it("should show validation message when clicking Sign In without password", async (context) => {
    const testdriver = TestDriver(context);
    await testdriver.provision.chrome({ url: 'http://testdriver-sandbox.vercel.app/login' });

    // First fill in username
    const usernameField = await testdriver.find(
      "Username, input field for username",
    );
    await usernameField.click();
    await testdriver.type("standard_user");

    const signInButton = await testdriver.find(
      "Sign in, black button below the password field",
    );
    await signInButton.click();

    await testdriver.focusApplication("Google Chrome");
    const result = await testdriver.assert(
      "Please fill out this field is visible near the password field",
    );
    expect(result).toBeTruthy();
  });
});

How it works

• type() types into the focused element, so each test clicks the username field first.
• assert() can check a field’s contents (the username field contains "standard_user") as well as on-screen messages.
• The second test calls focusApplication('Google Chrome') before asserting. This keeps Chrome in front when the validation tooltip appears.

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/type.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

• type()
• click()
• assert()