1. Предисловие

пол года назад,Случайно наткнулся на организацию, которая ведет прямую трансляцию на видеоаккаунте.Playwrightрамкаизиспользовать,Просто смотрел это некоторое время,Чувствую себя довольно хорошо,Посеяно,Я просто подумал, что смогу научиться этому сам, если у меня будет время.,Прошло больше полугода с тех пор, как я задумался об этом.

Прочитав это, вы можете перейти в Baidu. Для чего нужна эта штука?

Осторожный одноклассник,может быть найден,оPlaywrightна основеPythonязыкиз Бовенжениз Да, много искать,Условно говоря, Java жалка.

Разве я недавно снова не видел определенного владельца аккаунта?,ВсегдасуществоватьвозобновлятьоPlaywrightна основеPythonязыкизстатья,Это еще раз пробудило во мне желание учиться.

Если вы хотите сделать что-то отличное от других, то я просто напишу серию о Java.

два、Playwrightчто такое？

Майкрософт Открытый исходный кодавтоматизацияинструменты тестированияPlaywright,Поддержка основных браузеров,включать：Chrome、Firefox、Safari и т. д. Он также поддерживает работу в безголовом режиме и безголовом режиме, а также обеспечивает синхронный и асинхронный режим. API,Можно комбинировать Он используется основными средами тестирования и поддерживает такие функции, как автоматическая запись сценариев на стороне браузера.

Функции:

• кроссбраузерный：Playwright Поддерживает все современные механизмы рендеринга.,включатьChromium、WebKit и Firefox；
• Кроссплатформенность: включена Windows、Linux и MacOS на местном или CI、Безголовое или возглавляемое тестирование;
• Межъязыковый: в TypeScript、JavaScript、Python、.NET、Java серединаиспользоватьPlaywright API;
• Тестовая мобильная сеть: для Android и Mobile Safari из Google Chrome Нативная мобильная эмуляция. Один и тот же механизм рендеринга работает на вашем рабочем столе и в облаке.

Официальный адрес сайта:

https://playwright.dev

Адрес Гит Хаба:

https://github.com/microsoft/playwright

С точки зрения непрофессионала:Просто мейнстримизавтоматизацияинструменты тестирования,Он может быть кроссплатформенным, межъязыковым, с открытым исходным кодом, поддерживать распространение, иметь зрелое сообщество и обучающие документы.,В основном используется для тестирования интерфейса и веб-автоматизации.

3. Настройка среды разработки.

Это все есть в ИнтернетеоPythonиз Простая среда для настройки и установки,Различныйpip install ** ......

Я не буду повторять одно и то же, поэтому давайте продемонстрируем, как настроить среду разработки Java.

1. Настройка среды разработки

добавить вpomдокумент,Как показано ниже:

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>org.example</groupId>
    <artifactId>examples</artifactId>
    <version>0.1-SNAPSHOT</version>
    <name>Playwright Client Examples</name>
    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    </properties>
    <dependencies>
        <dependency>
            <groupId>com.microsoft.playwright</groupId>
            <artifactId>playwright</artifactId>
            <version>1.25.0</version>
        </dependency>
    </dependencies>
    <build>
        <plugins>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-compiler-plugin</artifactId>
                <version>3.1</version>
                <configuration>
                    <source>1.8</source>
                    <target>1.8</target>
                </configuration>
            </plugin>
        </plugins>
    </build>
</project>

добавить вExample.java,Пример кода выглядит следующим образом:

package org.example;

import com.microsoft.playwright.*;

public class Example {
 public static void main(String[] args) {
   try (Playwright playwright = Playwright.create()) {
     Browser browser = playwright.chromium().launch();
     Page page = browser.newPage();
     page.navigate("https://www.cnblogs.com/longronglang");
     System.out.println(page.title());
   }
 }
}

Запустив этот класс, вы загрузите Playwright упаковать и установить для Chromium、Firefox и WebKit Бинарный файл браузера выглядит следующим образом:

image.png

image.png

2. Первая программа

Откройте домашнюю страницу и сделайте снимок экрана. Пример кода выглядит следующим образом:

package org.example;

import com.microsoft.playwright.*;
import java.nio.file.Paths;

public class WebKitScreenshot {
  public static void main(String[] args) {
    try (Playwright playwright = Playwright.create()) {
      Browser browser = playwright.webkit().launch();
      Page page = browser.newPage();
      page.navigate("https://www.cnblogs.com/longronglang");
      page.screenshot(new Page.ScreenshotOptions().setPath(Paths.get("example.png")));
    }
  }
}

Результаты запуска:

image.png

проиллюстрировать:

По умолчанию Драматург Запустите браузер в безголовом режиме. Для просмотра браузера UI,Необходимо передать при запуске браузераheadless=falseлоготип,API и конкретные параметры будут обновлены в последующих статьях.

4. Запись сценария

1. Установка среды записи

и многие инструменты тестирования автоматизации, такие как,PlaywrightВы также можете записывать и создавать сценариииз。

Затем следующий шаг покажет, как писать скрипты.из Записывать（Я лично не люблю записывать）,Операцию здесь проводят только нуждающиеся.

потому что Изсделать раньшеизelectronРазработка среды настольных приложений,полагатьсяnode.jsОперационная среда,иPlaywrightТакже идеальная поддержкаnode. js,Тогда я буду использоватьnodeПродемонстрируйте окружающую среду всем。

Подтвердите среду и версию узла:

node -v

image.png

Установить:

npm init -y
npm i -D @playwright/test

image.png

2. Как записать

использоватьPlaywrightНе нужно писать ни строчки кода,Нам просто нужно вручную управлять браузером,Он будет записывать наши операции,Затем автоматически генерируйте сценарии кода.

Введите следующую команду, чтобы начать запись

Как показано ниже:

npx playwright codegen https://www.cnblogs.com/longronglang (тестовый сайт)

image.png

image.png

существоватьplaywright inspectorсередина选择你需要язык：

Вот пример Java: Как показано ниже:

image.png

Во время операции будут появляться подсказки о позиционировании страницы.,Нажмите, чтобы завершить запись,И скопировать сгенерированный скрипт,Как показано ниже:

image.png

image.png

Что касается позиционирования элемента, вы можете использовать встроенный инструмент проверки для проверки выражения позиционирования элемента, как показано на следующем рисунке:

image.png

3. Создать сценарий

Создать код Как показано ниже:

package org.example;

import com.microsoft.playwright.*;
import com.microsoft.playwright.options.*;
import static com.microsoft.playwright.assertions.PlaywrightAssertions.assertThat;
import java.util.*;

public class Example {
  public static void main(String[] args) {
    try (Playwright playwright = Playwright.create()) {
      Browser browser = playwright.chromium().launch(new BrowserType.LaunchOptions()
        .setHeadless(false));
      BrowserContext context = browser.newContext();

      // Open new page
      Page page = context.newPage();

      // Go to https://www.cnblogs.com/longronglang
      page.navigate("https://www.cnblogs.com/longronglang");

      // Click #mainContent >> text=pythonавтоматизация серии руководств по тестированию
      page.locator("#mainContent >> text=pythonавтоматизация серии руководств по тестированию").click();
      assertThat(page).hasURL("https://www.cnblogs.com/longronglang/p/16667125.html");

      // Click #sbTitleText
      page.locator("#sbTitleText").click();

      // Click #sbTitleText
      page.locator("#sbTitleText").click(new Locator.ClickOptions()
        .setButton(MouseButton.RIGHT));

      // Click #sbTitleText
      page.locator("#sbTitleText").click();

      // Click .onOff
      page.locator(".onOff").click();

      // Click .onOff
      page.locator(".onOff").click();
    }
  }
}

проиллюстрировать:

Как видно из вышеизложенного, записанный сценарий автоматически будет иметь комментарии на английском языке, а эффект выполнения можно будет увидеть через браузер.

Скрипт воспроизведения Как показано ниже:сгенерирую скрипт,Вставить в IDEA,Нажмите, чтобы запустить следующим образом:

http://mpvideo.qpic.cn/0bc33aaacaaalyaluyyyunrvbwgdahmaaaia.f10002.mp4?

здесьоPlaywrightНастройка среды разработки и скриптовиз Записывать Завершенный,Заинтересованные студенты могут попробовать это самостоятельно.

5. Напишите в конце

Скорость выполнения этого фреймворка немного медленная, а первый запуск занимает много времени, но в остальном всё нормально.

написать эту статью,Это чисто техническая задача, и я хочу изучить новые технологии.,Я напишу эту серию статей или руководств позже.,Заинтересованные студенты могут оставить сообщение в конце статьи.,Или добавьте меня в друзья, чтобы общаться и учиться вместе.

Либо вы присоединились к нескольким группам технического обмена, изменили заметку о разработке теста, либо начали тестирование. А что касается того, как далеко оно зайдет, разве вы не знаете?

Мой совет новым студентам:,Не будьте слепо одержимы тестированием,Идите и изучайте разработку напрямую,В основном вы можете изучать идеи и способности решать проблемы.

Лично я считаю, что обучение – это всегда ваше личное дело и не имеющее ничего общего с другими. Просто будьте самим собой.

Независимо от основы,Вы полны решимости изменить себя?,Нет ничего, чему нельзя было бы научиться, верно?