Chrome Extension Test Example

/**
 * TestDriver SDK - Chrome Extension Test (Vitest)
 * Tests loading a Chrome extension using provision.chromeExtension()
 * 
 * This test suite covers:
 * 1. Loading extension from local path (extensionPath)
 * 2. Loading extension from Chrome Web Store (extensionId)
 */

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

describe("Chrome Extension Test", () => {
  it("should load hello-world Chrome extension from local path", async (context) => {

    console.log('connecting to', process.env.TD_IP)

    const testdriver = TestDriver(context, { ip: context.ip || process.env.TD_IP, cacheKey: new Date().getTime().toString() });
    
    // Determine OS-specific paths and commands
    const shell = testdriver.os === 'windows' ? 'pwsh' : 'sh';
    const extensionsDir = testdriver.os === 'windows' 
      ? 'C:\\Users\\testdriver\\Downloads\\chrome-extensions-samples'
      : '/tmp/chrome-extensions-samples';
    const extensionPath = testdriver.os === 'windows'
      ? `${extensionsDir}\\functional-samples\\tutorial.hello-world`
      : `${extensionsDir}/functional-samples/tutorial.hello-world`;
    
    // Clone the Chrome extensions samples repo
    const cloneCmd = testdriver.os === 'windows'
      ? `git clone --depth 1 https://github.com/GoogleChrome/chrome-extensions-samples.git "${extensionsDir}"`
      : `git clone --depth 1 https://github.com/GoogleChrome/chrome-extensions-samples.git ${extensionsDir}`;
    
    await testdriver.exec(shell, cloneCmd, 60000, true);

    // Launch Chrome with the hello-world extension loaded
    await testdriver.provision.chromeExtension({
      extensionPath: extensionPath
    });

    // Navigate to testdriver.ai (extensions don't load on New Tab)
    const addressBar = await testdriver.find("Chrome address bar");
    await addressBar.click();
    await testdriver.type("testdriver.ai");
    await testdriver.pressKeys(["enter"]);

    // Wait for page to load
    const pageResult = await testdriver.assert("I can see testdriver.ai");
    expect(pageResult).toBeTruthy();

    // The hello-world extension adds a puzzle piece icon to the toolbar
    // When clicked, it shows a popup with "Hello Extensions"

    // Retry opening the extension popup and verifying it up to 3 times
    let popupResult;
    let lastError;
    for (let attempt = 1; attempt <= 3; attempt++) {
      try {
        // Click on the extensions button (puzzle piece icon) in Chrome toolbar
        const extensionsButton = await testdriver.find("The extensions button in the Chrome toolbar", {zoom: true, verify: true, timeout: 10000});
        await extensionsButton.click();

        // Look for the hello world extension in the extensions menu
        const helloExtension = await testdriver.find("Hello Extensions extension in the extensions dropdown", {zoom: true, verify: true, timeout: 10000});
        await helloExtension.click();

        await testdriver.wait(2000); // wait for the popup to open

        // Verify the extension popup shows "Hello Extensions" text
        popupResult = await testdriver.assert("a popup shows with the text 'Hello Extensions'");
        if (popupResult) break;
      } catch (err) {
        lastError = err;
        console.log(`Attempt ${attempt} failed:`, err.message);
      }
      if (attempt < 3) {
        // Dismiss any open popup/menu before retrying
        await testdriver.pressKeys(["escape"]);
        await testdriver.wait(1000);
      }
    }
    if (!popupResult && lastError) throw lastError;
    expect(popupResult).toBeTruthy();
  });

  // it("should load Loom from Chrome Web Store by extensionId", async (context) => {
  //   const testdriver = TestDriver(context, { ip: context.ip || process.env.TD_IP});

  //   // Launch Chrome with Loom loaded by its Chrome Web Store ID
  //   // Loom ID: liecbddmkiiihnedobmlmillhodjkdmb
  //   await testdriver.provision.chromeExtension({
  //     extensionId: 'liecbddmkiiihnedobmlmillhodjkdmb'
  //   });

  //   // Navigate to testdriver.ai (extensions don't load on New Tab)
  //   const addressBar = await testdriver.find("Chrome address bar");
  //   await addressBar.click();
  //   await testdriver.type("testdriver.ai");
  //   await testdriver.pressKeys(["enter"]);

  //   // Wait for page to load
  //   const pageResult = await testdriver.assert("I can see testdriver.ai");
  //   expect(pageResult).toBeTruthy();

  //   // Click on the extensions button (puzzle piece icon) in Chrome toolbar
  //   const extensionsButton = await testdriver.find("The puzzle-shaped icon in the Chrome toolbar.", {zoom: true});
  //   await extensionsButton.click();

  //   // Look for Loom in the extensions menu
  //   const loomExtension = await testdriver.find("Loom extension in the extensions dropdown");
  //   expect(loomExtension.found()).toBeTruthy();
  // });
});