Selenium Bridge

npm install @nut-tree/selenium-bridge selenium-webdriver

npm install --save-dev @types/selenium-webdriver

import { Builder, Browser, By, until } from "selenium-webdriver";
import { screen, mouse, imageResource, centerOf, straightTo, Button } from "@nut-tree/nut-js";
import { useNlMatcher } from "@nut-tree/nl-matcher";
import { useSelenium, elementAt } from "@nut-tree/selenium-bridge";

useNlMatcher();

async function hybridTest() {
  const driver = await new Builder()
    .forBrowser(Browser.CHROME)
    .build();

  try {
    useSelenium({ driver });
    await driver.get("https://example.com/products");

    // Use Selenium for navigation
    await driver.findElement(By.css('[data-category="electronics"]')).click();
    await driver.wait(until.elementLocated(By.css('.product-grid')), 5000);

    // Use nut.js for visual verification with match validation
    const productCard = await screen.find(imageResource("featured-product.png"), {
      confidence: 0.9,
      providerData: { validateMatches: true }
    });
    console.log("Found featured product at:", productCard);

    // Click using visual position
    await mouse.move(straightTo(centerOf(productCard)));
    await mouse.click(Button.LEFT);

    // Get the element for further Selenium operations
    const productElement = await elementAt(productCard);

    // Use Selenium to get attributes
    const productId = await productElement.getAttribute("data-product-id");
    console.log("Product ID:", productId);

  } finally {
    await driver.quit();
  }
}

import { Builder, Browser, By } from "selenium-webdriver";
import { screen, imageResource } from "@nut-tree/nut-js";
import { useNlMatcher } from "@nut-tree/nl-matcher";
import { useSelenium } from "@nut-tree/selenium-bridge";

useNlMatcher();

async function multiWindowTest() {
  const driver = await new Builder()
    .forBrowser(Browser.CHROME)
    .build();

  try {
    useSelenium({ driver });
    await driver.get("https://example.com");

    // Click link that opens new window
    await driver.findElement(By.css('[target="_blank"]')).click();

    // Switch to new window
    const handles = await driver.getAllWindowHandles();
    await driver.switchTo().window(handles[1]);

    // Bridge automatically uses the active window
    const newPageHeader = await screen.find(imageResource("new-page-header.png"));
    console.log("Found header in new window:", newPageHeader);

    // Switch back to original window
    await driver.switchTo().window(handles[0]);

    // Searches now happen in original window
    const originalHeader = await screen.find(imageResource("original-header.png"));

  } finally {
    await driver.quit();
  }
}

import { Builder, Browser } from "selenium-webdriver";
import { screen, mouse, centerOf, straightTo, Button, imageResource, singleWord } from "@nut-tree/nut-js";
import { useNlMatcher } from "@nut-tree/nl-matcher";
import { useSelenium } from "@nut-tree/selenium-bridge";
import { useOcrPlugin, configure, LanguageModelType } from "@nut-tree/plugin-ocr";

useNlMatcher();
useOcrPlugin();

// Configure OCR
configure({
  dataPath: "./ocr-data",
  languageModelType: LanguageModelType.BEST
});

async function extractPrices() {
  const driver = await new Builder()
    .forBrowser(Browser.CHROME)
    .build();

  try {
    useSelenium({ driver });
    await driver.get("https://example.com/pricing");

    // Find element by its text content
    const addToCart = await screen.find(singleWord("Add"));
    await mouse.move(straightTo(centerOf(addToCart)));
    await mouse.click(Button.LEFT);

    // Find price section by image
    const priceSection = await screen.find(imageResource("pricing-table.png"));

    // Read text from the price area
    const priceText = await screen.read({ searchRegion: priceSection });
    console.log("Pricing text:", priceText);

  } finally {
    await driver.quit();
  }
}

import { Builder, Browser } from "selenium-webdriver";
import { screen, mouse, imageResource, centerOf, straightTo, Point } from "@nut-tree/nut-js";
import { useNlMatcher } from "@nut-tree/nl-matcher";
import { useSelenium } from "@nut-tree/selenium-bridge";

useNlMatcher();

async function testInteractiveChart() {
  const driver = await new Builder()
    .forBrowser(Browser.CHROME)
    .build();

  try {
    useSelenium({ driver });
    await driver.get("https://example.com/analytics");

    // Wait for chart to render
    await screen.waitFor(imageResource("chart-container.png"), 10000, 1000);

    // Find a specific data point on the chart
    const dataPoint = await screen.find(imageResource("chart-peak-marker.png"));

    // Hover to show tooltip
    await mouse.move(straightTo(centerOf(dataPoint)));
    await new Promise(r => setTimeout(r, 500));

    // Verify tooltip appears
    await screen.waitFor(imageResource("chart-tooltip.png"), 3000, 500);

    // Check chart color at specific position (verify data series)
    const chartArea = await screen.find(imageResource("chart-area.png"));
    const color = await screen.colorAt(new Point(
      chartArea.left + 100,
      chartArea.top + 50
    ));

    // Verify expected color for primary data series
    if (color.B > 200 && color.R < 100) {
      console.log("Primary data series is displayed correctly");
    }

  } finally {
    await driver.quit();
  }
}

import { Builder, Browser } from "selenium-webdriver";
import { screen, imageResource } from "@nut-tree/nut-js";
import { useNlMatcher } from "@nut-tree/nl-matcher";
import { useSelenium } from "@nut-tree/selenium-bridge";

useNlMatcher();

const driver = await new Builder()
  .forBrowser(Browser.CHROME)
  .usingServer("http://selenium-hub:4444/wd/hub")
  .build();

useSelenium({ driver });

await driver.get("https://example.com");
const header = await screen.find(imageResource("header.png"));