Testing E2E Berasaskan AI dengan Midscene.js dan Playwright

Testing E2E tanpa menulis selector. Dalam catatan ini, kita akan cuba menggunakan Midscene.js untuk mengawal UI dengan arahan Natural language bersama Playwright, framework popular untuk automated browser testing.

Apakah Midscene.js?

Midscene.js adalah JavaScript SDK yang menggunakan model LLM (seperti GPT-4o atau Qwen) untuk mentafsir arahan kita, seperti:

"Taip art toy dan cari" "Ekstrak semua nama produk dan harga"

Dan menukarkannya menjadi interaksi browser sebenar tanpa menulis sebarang kod DOM/selector.

Integrasi dengan Playwright

Untuk mereka yang ingin melihat konfigurasi playwright lengkap termasuk kod e2e itu sendiri, anda boleh memeriksa Example Project yang dicipta midscenejs https://github.com/web-infra-dev/midscene-example/blob/main/playwright-demo https://midscenejs.com/integrate-with-playwright.html

Di sini kita akan cuba search chaka on popmart

./e2e/popmart-search.ts

import { expect } from "@playwright/test";
import { test } from "./fixture";

test.beforeEach(async ({ page, aiTap }) => {
  page.setViewportSize({ width: 1280, height: 768 });
  await page.goto("https://www.popmart.com/th");
  await page.waitForLoadState("load");
  await aiTap('click the "ยอมรับ" (accept) button for privacy policy at the bottom of the page');
});

test("search chaka on popmart", async ({
  ai,
  aiQuery,
  aiAssert,
  aiWaitFor,
  aiNumber,
  aiBoolean,
  aiString,
  aiLocate,
}) => {
  // 👀 type keywords, perform a search
  await ai('type "chaka" in search box located in the top appbar, hit Enter');

  // 👀 wait for the loading
  await aiWaitFor("there is at least one item item on page");

  // 👀 find the items
  const items = await aiQuery(
    "{itemTitle: string, price: Number}[], find item in list and price"
  );
  console.log("items", items);
  expect(items?.length).toBeGreaterThan(0);

});

Langkah demi langkah

1. Buka https://www.popmart.com/th dan tunggu sehingga selesai
2. Kita akan menggunakan aiTap untuk mengklik butang accept di bahagian cookie

Kelebihan lain menggunakan midscene adalah ia melaporkan setiap tindakan secara visual

3. ai('type "chaka" in search box located in the top appbar, hit Enter') Beritahu AI untuk mencari search box di top appbar, taip chaka dan tekan enter

Jika anda cuba mengklik di website sebenar, anda akan melihat tidak hanya mengklik dan menaip dalam kotak itu tetapi UI menunjukkan elemen seperti drawer, dan ini boleh mengendalikannya juga

4.await aiWaitFor("there is at least one item item on page") Tunggu sehingga item muncul

5. aiQuery kita memberitahunya untuk membantu query item dan harga {itemTitle: string, price: Number}[], find item in list and price

Expect item harus wujud. Sebenarnya, kita juga boleh menambah syarat bahawa item mesti berkaitan dengan kata kunci yang kita cari (dalam kes ini, Chaka)

Tetapi kita harus perhatikan bahawa ini dari perspektif visualisasi sebagai imej, bermakna hanya melihat apa yang ditunjukkan di skrin.

items [
  { itemTitle: 'CHAKA Candle Whisper Series Figures', price: 380 },
  { itemTitle: 'CHAKA Candle Whisper Series Figures', price: 380 },
  {
    itemTitle: 'MEGA SPACE MOLLY 400% Sanrio Characters Series',
    price: 6290
  }
]

Laporan

Selepas menjalankan, kita boleh melihat laporan untuk setiap tindakan, yang menunjukkan jika ia tindakan AI, berapa banyak token digunakan, dan berapa lama masa yang diambil.

Caching

Saya percaya ramai orang akan bertanya "Bukankah ini akan mahal dan perlahan jika kita perlu memanggil AI setiap kali?"

Midscene menyokong caching planning steps dan DOM XPath untuk mengurangkan panggilan ke model AI. Selepas test run pertama, ia akan mencipta caching sebagai .yaml

midscene_run/cache/popmart.spec.ts(search-chaka-on-popmart).cache

midsceneVersion: 0.17.0
cacheId: popmart.spec.ts(search-chaka-on-popmart)
caches:
  - type: locate
    prompt: >-
      click the "ยอมรับ" (accept) button for privacy policy at the bottom of the
      page
    xpaths:
      - //*[@id="__next"]/div[1]/div[1]/div[4]/div[1]/div[2]/text()
  - type: locate
    prompt: The search box in the top appbar
    xpaths:
      - >-
        //*[@id="__next"]/div[1]/div[1]/div[1]/div[1]/div[2]/div[2]/div[1]/div[1]/div[1]/div[1]/div[1]/div[1]/img[1]
  - type: plan
    prompt: type "chaka" in search box located in the top appbar, hit Enter
    yamlWorkflow: |
      tasks:
        - name: type "chaka" in search box located in the top appbar, hit Enter
          flow:
            - aiInput: chaka
              locate: The search box located in the top appbar
            - aiKeyboardPress: Enter
  - type: locate
    prompt: The search box located in the top appbar
    xpaths:
      - >-
        //*[@id="__next"]/div[1]/div[1]/div[1]/div[1]/div[2]/div[1]/div[1]/text()

Ini adalah contoh selepas menjalankan test carian popmart. Anda akan melihat telah mencipta planning dan xpaths.

Jadi masa seterusnya jika kita jalankan dengan cache, ia akan berjalan dengan arahan-arahan ini daripada memanggil AI.

Kecuali untuk aiBoolean, aiQuery, aiAssert yang tidak akan di-cache kerana mereka adalah query, bukan tindakan.

AI Model

Kerana midscenejs adalah projek open-source berasingan daripada cloud provider atau model mana pun, kita boleh memilih untuk deploy sama ada secara awam atau peribadi.

Kelebihan Menggunakan AI untuk E2E Testing Berbanding Testing Tradisional

1. Memahami UI tanpa terikat pada DOM selector

• Jika UI berubah jenis elemen (contohnya <button> → <a>), traditional test script akan rosak
• Tetapi AI melihat konteks UI seperti teks, warna, kedudukan sebaliknya Atau kadang-kadang mengharapkan adakah ia bulat? adakah merah?

2. Komunikasi mudah dengan ahli pasukan bukan-dev

• PM, Designer boleh membaca test
• Atau menulis prompt asas sendiri tanpa mengetahui JavaScript
• Contohnya "open settings page and check if there's a toggle for dark mode"

3. Sesuai untuk testing business logic / senario high-level

4. Lebih mudah menulis test untuk dynamic UI

• Contohnya "click confirm and there should be a success dialog at the top right corner"
• Traditional test mungkin perlukan banyak branch, tetapi AI memahami konteks lebih baik

Walau bagaimanapun, kita masih tidak patut menggabungkan semua tindakan AI menjadi satu arahan. Kita harus tetap memisahkan tindakan dengan jelas kerana ini adalah Test dan kita tidak mahu tingkah laku non-deterministik setiap kali apabila menjalankan dalam sistem test https://midscenejs.com/blog-programming-practice-using-structured-api.html

Kesimpulan

Pada pandangan saya, menggunakan testing berasaskan AI adalah seperti mempunyai "pembantu yang memahami UI" untuk membantu menulis test — ia tidak menggantikan semuanya dan kita perlu memahami aspek ini juga. Tetapi ia membantu menyelesaikan masalah dalam aliran interaksi pengguna sebenar. Kita boleh memikirkannya dari perspektif visualisasi, seperti apabila pengguna melakukan ini, ini harus berlaku di skrin. Kadang-kadang menangkap elemen mungkin sangat sukar, tetapi dari perspektif pengguna sebenar, ia mungkin sangat mudah.