Testing E2E Berbasis AI dengan Midscene.js dan Playwright

Testing E2E tanpa menulis selector. Dalam postingan ini, kita akan mencoba menggunakan Midscene.js untuk mengontrol UI dengan perintah Natural language bersama Playwright, framework populer untuk automated browser testing.

Apa itu Midscene.js?

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

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

Dan mengkonversinya menjadi interaksi browser aktual tanpa menulis kode DOM/selector apapun.

Integrasi dengan Playwright

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

Di sini kita akan mencoba 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 hingga selesai
2. Kita akan menggunakan aiTap untuk mengklik tombol accept di bagian cookie

Keuntungan lain menggunakan midscene adalah melaporkan setiap aksi secara visual

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

Jika Anda mencoba mengklik di website sebenarnya, Anda akan melihat tidak hanya mengklik dan mengetik di kotak itu tetapi UI menampilkan elemen seperti drawer, dan ini dapat menanganinya juga

4.await aiWaitFor("there is at least one item item on page") Tunggu hingga 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 ada. Pada kenyataannya, kita juga dapat menambahkan kondisi bahwa item harus terkait dengan keyword yang kita cari (dalam hal ini, Chaka)

Tetapi kita harus mencatat bahwa ini dari perspektif visualisasi sebagai gambar, artinya hanya melihat apa yang ditampilkan di layar.

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
  }
]

Report

Setelah menjalankan, kita dapat melihat report untuk setiap aksi, yang menunjukkan apakah itu aksi AI, berapa banyak token yang digunakan, dan berapa lama waktu yang dibutuhkan.

Caching

Saya yakin banyak orang akan bertanya "Bukankah ini akan mahal dan lambat jika kita harus memanggil AI setiap kali?"

Midscene mendukung caching planning steps dan DOM XPath untuk mengurangi panggilan ke model AI. Setelah test run pertama, ini akan membuat 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 setelah menjalankan test pencarian popmart. Anda akan melihat telah membuat planning dan xpaths.

Jadi waktu berikutnya jika kita jalankan dengan cache, ini akan berjalan dengan perintah-perintah ini daripada memanggil AI.

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

AI Model

Karena midscenejs adalah proyek open-source terpisah dari cloud provider atau model manapun, kita dapat memilih untuk deploy baik secara publik maupun privat.

Keuntungan Menggunakan AI untuk E2E Testing Dibandingkan Testing Tradisional

1. Memahami UI tanpa terikat pada DOM selector

• Jika UI berubah tipe elemen (misalnya <button> → <a>), traditional test script akan rusak
• Tetapi AI melihat konteks UI seperti teks, warna, posisi sebagai gantinya Atau terkadang mengharapkan apakah itu lingkaran? apakah merah?

2. Komunikasi mudah dengan anggota tim non-dev

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

3. Cocok untuk testing business logic / skenario high-level

4. Lebih mudah menulis test untuk dynamic UI

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

Namun, kita masih tidak boleh menggabungkan semua aksi AI menjadi satu perintah. Kita harus tetap memisahkan aksi dengan jelas karena ini adalah Test dan kita tidak ingin perilaku non-deterministik setiap kali saat menjalankan di sistem test https://midscenejs.com/blog-programming-practice-using-structured-api.html

Kesimpulan

Menurut saya, menggunakan testing berbasis AI seperti memiliki "asisten yang memahami UI" untuk membantu menulis test — ini tidak menggantikan semuanya dan kita perlu memahami aspek ini juga. Tetapi ini membantu memecahkan masalah dalam aliran interaksi pengguna nyata. Kita dapat memikirkannya dari perspektif visualisasi, seperti ketika pengguna melakukan ini, ini harus terjadi di layar. Terkadang menangkap elemen mungkin sangat sulit, tetapi dari perspektif pengguna sebenarnya, mungkin sangat sederhana.