web自动化AI工具(dev-tools.ai)

dev tools ai --

Quickstart

You do not have any UI elements registered yet, so you can follow the following steps to run the tutorial and get your first elements. Or if you know already how to use the tool, simply run a test case and it will show up here

Choose a framework: Choose a language:

Install Dependencies

If you haven't done so already, please install selenium and devtools

1
2
3

pip install selenium
pip install devtools-ai
pip install webdriver_manager

Sample Test

As an example of smartDriver in action, we will use a basic selenium test case that goes to Google and searches for hello world. You can see the SmartDriver lines added to the script. Running this test will automatically leverage the devtools_ai package, it will collect screenshots and bounding boxes for the UI elements involved in the test. Once this is done, the selector could break and your test would still work.

After you run the sample test, refresh this page to see the new UI elements that were registered, you can click on them to display the data that was collected.

After that it is up to you to integrate the tool into more tests and start getting the benefits.

from time import sleep

from selenium.webdriver.common.by import By
from selenium.webdriver import Chrome
from selenium.webdriver.chrome.service import Service
from webdriver_manager.chrome import ChromeDriverManager

from devtools_ai.selenium import SmartDriver

def _main() -> None:
    """Main driver"""
    chrome_driver = Chrome(service=Service(ChromeDriverManager().install()))

    # Convert chrome_driver to smartDriver
    driver = SmartDriver(chrome_driver, "3597425fb9741b441cac2810")

    # Navigate to Google.com
    driver.get("https://google.com")
    sleep(1)

    # Find the searchbox and send "hello world"
    searchbox_element = driver.find_element(By.NAME, "q")
    searchbox_element.send_keys("hello world\n")

    sleep(2)

    driver.quit()


if __name__ == "__main__":
    _main()

Install Dependencies

If you haven't done so already, please install selenium and devtools.

If you are using Gradle

build.gradle
1 2	implementation 'ai.dev-tools:ai-devtools:+' implementation 'io.github.bonigarcia:webdrivermanager:5.1.0'

If you are using Maven

pom.xml
1 2 3 4 5 6 7 8 9 10 11 12	<dependencies> <dependency> <groupId>ai.dev-tools</groupId> <artifactId>ai-devtools</artifactId> <version>LATEST</version> </dependency> <dependency> <groupId>io.github.bonigarcia</groupId> <artifactId>webdrivermanager</artifactId> <version>5.1.0</version> </dependency> </dependencies>

pom.xml

<dependencies>
    <dependency>
        <groupId>ai.dev-tools</groupId>
        <artifactId>ai-devtools</artifactId>
        <version>LATEST</version>
    </dependency>
    <dependency>
        <groupId>io.github.bonigarcia</groupId>
        <artifactId>webdrivermanager</artifactId>
        <version>5.1.0</version>
    </dependency>
</dependencies>

Sample Test

After you run the sample test, refresh this page to see the new UI elements that were registered, you can click on them to display the data that was collected.

After that it is up to you to integrate the tool into more tests and start getting the benefits.

package my.awesome.pkg;

import org.openqa.selenium.WebElement;
import org.openqa.selenium.By;
import org.openqa.selenium.chrome.ChromeDriver;

import io.github.bonigarcia.wdm.WebDriverManager;
// Import DevTools
import ai.devtools.selenium.SmartDriver;

public class Example
{
    public static void main(String[] args) throws Throwable
    {
        WebDriverManager.chromedriver().setup();
        ChromeDriver chromeDriver = new ChromeDriver();

        try
        {
            SmartDriver driver = new SmartDriver(chromeDriver, "3597425fb9741b441cac2810");
            driver.get("https://google.com/");

            Thread.sleep(1000);

            WebElement searchBoxElement = driver.findElement(By.name("q"));
            searchBoxElement.sendKeys("hello world\n");

            Thread.sleep(1000);
        }
        finally
        {
            chromeDriver.quit();
        }
    }
}

Install Dependencies

If you haven't done so already, please install selenium and devtools

1 2	pip install Appium-Python-Client pip install devtools-ai

Sample Test

As an example of smartDriver in action, we will use the Reddit is fun app and click on some buttons. You can see the SmartDriver lines added to the script. Running this test will automatically leverage the devtools_ai package, it will collect screenshots and bounding boxes for the UI elements involved in the test. Once this is done, the selector could break and your test would still work.

After you run the sample test, refresh this page to see the new UI elements that were registered, you can click on them to display the data that was collected.

After that it is up to you to integrate the tool into more tests and start getting the benefits.

import time
import unittest
from appium import webdriver
from appium.webdriver.common.appiumby import AppiumBy

from devtools_ai.appium import SmartDriver


def _main() -> None:
    """Main driver"""
    desired_caps = dict(
        platformName='Android',
        automationName='uiautomator2',
        deviceName='emulator-5554',
        app='/path/to/app.apk' # <-- Replace with a valid APK path
    )
    appium_driver = webdriver.Remote('http://localhost:4723/wd/hub', desired_caps)

    driver = SmartDriver(appium_driver, "3597425fb9741b441cac2810")

    done_button = driver.find_element(by=AppiumBy.XPATH, value='//*[@text="DONE"]')
    done_button.click()
    time.sleep(1)

    new_button = driver.find_element(by=AppiumBy.XPATH, value='//*[@text="NEW"]')
    new_button.click()
    time.sleep(1)


if __name__ == "__main__":
    _main()

Install Dependencies

If you haven't done so already, please install selenium and devtools.

If you are using Gradle

build.gradle
1	implementation 'ai.dev-tools:ai-devtools:+'

If you are using Maven

pom.xml
1 2 3 4 5 6 7	<dependencies> <dependency> <groupId>ai.dev-tools</groupId> <artifactId>ai-devtools</artifactId> <version>LATEST</version> </dependency> </dependencies>

Sample Test

After you run the sample test, refresh this page to see the new UI elements that were registered, you can click on them to display the data that was collected.

After that it is up to you to integrate the tool into more tests and start getting the benefits.

package my_package

import io.appium.java_client.MobileBy;
import io.appium.java_client.MobileElement;
import io.appium.java_client.android.AndroidDriver;
import io.appium.java_client.remote.MobileCapabilityType;
import org.junit.jupiter.api.Test;
import org.openqa.selenium.remote.DesiredCapabilities;
import ai.devtools.appium.SmartDriver;

import java.io.File;
import java.net.URL;

public class DefaultDemo {

    @Test public void test() {
        try {
            DesiredCapabilities capabilities = new DesiredCapabilities();
            capabilities.setCapability(MobileCapabilityType.APP, new File("/path_to_apk/redditisfun.apk").getAbsolutePath());
            capabilities.setCapability("allowTestPackages", true);
            capabilities.setCapability("appWaitForLaunch", false);
            capabilities.setCapability("newCommandTimeout", 0);

            System.out.println("Starting test");

            AndroidDriver<MobileElement> androidDriver = new AndroidDriver<MobileElement>(new URL("http://localhost:4723/wd/hub"), capabilities);
            SmartDriver<MobileElement> smartDriver = new SmartDriver<MobileElement>(androidDriver, "3597425fb9741b441cac2810");
            Thread.sleep(5000);
            MobileElement done = smartDriver.findElement(By.xpath("//*[@text=\"DONE\"]"));
            done.click();

            MobileElement newb = smartDriver.findElement(By.xpath("//*[@text=\"NEW\"]"));
            newb.click();

            smartDriver.quit();
        } catch(Exception e) {
            e.printStackTrace();
        }
    }
}

Install Dependencies

If you haven't done so already, please install devtools

1	npm install @devtools-ai/cypress-sdk

Plugin setup

You will need to edit a few files in your root project directory to enable the plugin

Here be careful to edit both index.js and e2e.js if you are doing end to end tests.

cypress/support/index.js and cypress/support/e2e.js
1	import '@devtools-ai/cypress-sdk';

These other two files should be in your project root (one level above ./cypress)

cypress.config.js
1 2 3 4 5 6 7 8 9 10 11 12	const { defineConfig } = require("cypress"); const { registerSmartDriverTasks } = require('@devtools-ai/cypress-sdk/dist/plugins'); module.exports = defineConfig({ e2e: { setupNodeEvents(on, config) { registerSmartDriverTasks(on, config); // implement node event listeners here return config; }, }, chromeWebSecurity: false, });

cypress.config.js

const { defineConfig } = require("cypress");
const { registerSmartDriverTasks } = require('@devtools-ai/cypress-sdk/dist/plugins');
module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      registerSmartDriverTasks(on, config);
      // implement node event listeners here
      return config;
    },
  },
  chromeWebSecurity: false,
});

smartdriver.config.js
1 2 3	module.exports = { apiKey: '3597425fb9741b441cac2810', };

Sample Test

As an example of smartDriver in action, we will use a test case that goes to Github and enters a username. Running this test will automatically leverage the devtools_ai package, it will collect screenshots and bounding boxes for the UI elements involved in the test. Once this is done, the selector could break and your test would still work.

After you run the sample test, refresh this page to see the new UI elements that were registered, you can click on them to display the data that was collected.

After that it is up to you to integrate the tool into more tests and start getting the benefits.

spec.cy.js
1 2 3 4 5 6	describe("Should be able to login", () => { it("Login", () => { cy.visit("http://www.github.com/login"); cy.get('[name="login"]').type("[email protected]"); }); });

Install Dependencies

If you haven't done so already, please install devtools

1	npm install @devtools-ai/wdio-sdk

Plugin setup

You will need to edit wdio.conf.js to enable the plugin

wdio.conf.js
1 2 3 4	beforeSuite: async function (suite) { const devtoolsai_plugin = require('@devtools-ai/wdio-sdk'); await devtoolsai_plugin.register(suite.title); },

You will need to also set an environment variable with your api key in your terminal or in a .env file. If you want interactive mode you can set the second env variable as well.

.env
1 2	DEVTOOLSAI_API_KEY=3597425fb9741b441cac2810 DEVTOOLSAI_INTERACTIVE=TRUE # or FALSE

Sample Test

After you run the sample test, refresh this page to see the new UI elements that were registered, you can click on them to display the data that was collected.

After that it is up to you to integrate the tool into more tests and start getting the benefits.

test/specs/example.e2e.js
1 2 3 4 5 6 7	describe('GH tests', () => { it('should enter username', async () => { await browser.url(`https://github.com/login`); await browser.$('//input[@id="login_field"]').keys('my_username'); await browser.pause(3000); }); });

test/specs/example.e2e.js

describe('GH tests', () => {
    it('should enter username', async () => {
        await browser.url(`https://github.com/login`);
        await browser.$('//input[@id="login_field"]').keys('my_username');
        await browser.pause(3000);
    });
});

Install Dependencies

If you haven't done so already, please install devtools

1	npm install @devtools-ai/playwright-sdk

Plugin setup

You will need to set an environment variable with your api key in your terminal or in a .env file. If you want interactive mode you can set the second env variable as well.

.env
1 2	DEVTOOLSAI_API_KEY=3597425fb9741b441cac2810 DEVTOOLSAI_INTERACTIVE=TRUE # or FALSE

After that the test case needs to be modified to enable Playwright

Sample Test

After you run the sample test, refresh this page to see the new UI elements that were registered, you can click on them to display the data that was collected.

After that it is up to you to integrate the tool into more tests and start getting the benefits.

tests/example.spec.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17	const base = require('@playwright/test'); const devtools = require('@devtools-ai/playwright-sdk'); // Extend basic test by registering the plugin const test = base.test.extend({ page: async ({ page }, use, testInfo) => { await devtools.register_devtools(page, testInfo.title); await use(page); }, }); test('Enter username into Github login', async ({ page }) => { await page.goto(`https://github.com/login`); (await page.$('//input[@id="login_field"]')).type('my_username'); await new Promise((r) => setTimeout(r, 2000)); });

tests/example.spec.js

const base = require('@playwright/test');
const devtools = require('@devtools-ai/playwright-sdk');

// Extend basic test by registering the plugin
const test = base.test.extend({
  page: async ({ page }, use, testInfo) => {
    await devtools.register_devtools(page, testInfo.title);
    await use(page);
  },
});


test('Enter username into Github login', async ({ page }) => {
    await page.goto(`https://github.com/login`);
    (await page.$('//input[@id="login_field"]')).type('my_username');
    await new Promise((r) => setTimeout(r, 2000));
});

---------若是你看了半天没明白 ,我简单说明一下就是在每次编辑web自动化是需要进获取name id是这个工具会自动加载一个小的工具提供给你便捷的使用不用在打开浏览器一步一步的找了,提升了效率OK?---------