Tes penyembuhan diri yang digerakkan oleh AI dengan penulis naskah, mentimun, JS – Beragampengetahuan

Pengujian otomatis sangat penting untuk pengembangan perangkat lunak modern, memastikan stabilitas dan mengurangi pekerjaan manual. Namun, karena perubahan dalam UI, skrip pengujian sering terputus, seperti modifikasi sifat elemen, struktur, atau pengidentifikasi. Kerangka kerja otomatisasi uji tradisional bergantung pada pelacak statis, membuatnya rentan terhadap perubahan ini. Otomasi penyembuhan diri yang digerakkan oleh AI membahas tantangan ini dengan mengevaluasi seleksi dinamis dan pelacak adaptif berdasarkan evaluasi waktu nyata.

Self-penyembuhan sendiri sangat penting untuk pengujian otomatis karena dapat sangat mengurangi overhead pemeliharaan yang terkait dengan skrip pengujian dengan secara otomatis beradaptasi dengan perubahan dalam antarmuka pengguna aplikasi. Hal ini memungkinkan pengujian tetap dapat diandalkan dan fungsional bahkan jika kode atau desain yang mendasari diperbarui, menghemat waktu dan upaya penguji sambil meningkatkan stabilitas dan efisiensi pengujian secara keseluruhan.

Alasan utama untuk penyembuhan diri dalam pengujian otomatis

Kurangi pemeliharaan tes

Ketika elemen UI berubah (seperti ID tombol atau nama kelas), mekanisme penyembuhan diri dapat secara otomatis memperbarui skrip pengujian untuk menemukan elemen baru, menghilangkan kebutuhan untuk pembaruan manual dan mencegah kegagalan tes karena pencari lokasi yang sudah ketinggalan zaman.

Meningkatkan keandalan tes

Dengan menyesuaikan perubahan secara dinamis, tes perbaikan diri cenderung mengalami kegagalan “serpihan” yang disebabkan oleh modifikasi UI kecil, menghasilkan hasil tes yang lebih andal.

Siklus pengembangan yang lebih cepat

Dengan lebih sedikit waktu untuk menguji pemeliharaan, pengembang dapat fokus membangun fitur baru dan memberikan pembaruan perangkat lunak lebih cepat.

Menangani aplikasi dinamis

Aplikasi modern sering memiliki antarmuka dinamis di mana elemen sering berubah, membuat fungsi penyembuhan diri penting untuk mempertahankan akurasi tes.

Bagaimana pelecehan diri bekerja

• Algoritma heuristik. Algoritma ini menganalisis struktur dan perilaku aplikasi untuk mengidentifikasi elemen kandidat yang paling mungkin berinteraksi dengan ketika pencari lokasi sebelumnya gagal.
• Logo Elemen Cerdas. Menggunakan teknik seperti pembelajaran mesin, kerangka pengujian juga dapat mengidentifikasi elemen yang sama, bahkan jika propertinya sedikit berubah, dan dapat beradaptasi dengan pembaruan.
• Beberapa strategi penentuan posisi. Skrip uji dapat menggunakan berbagai pencari lokasi (seperti ID, XPATH, pemilih CSS) untuk menemukan elemen, sehingga meningkatkan peluang untuk berhasil mengidentifikasi mereka bahkan jika satu pencari lokasi menjadi tidak valid.
• Mekanisme cadangan berbasis heuristik. Mari kita pahami penyembuhan diri dengan menerapkan mekanisme fallback berbasis heuristik dengan contoh-contoh.

Langkah 1

Inisialisasi Proyek Playwright dan instal dependensi mentimun dengan mengeksekusi perintah:

Tambahkan mentimun ke tes BDD

Cucumber memungkinkan tes penulisan dalam sintaks Gherkin untuk membuatnya dapat dibaca dan mudah untuk mempertahankan pemangku kepentingan non-teknis.

npm install --save-dev @cucumber/cucumber

Langkah 2

Buat struktur folder di bawah ini dan tambahkan file yang diperlukan (add_to_cart.feature,,,,, add_to_cart.steps.jsDan cucumber.js).

Langkah 3

Tambahkan kode ke browserSetup.js.

const  chromium  = require('playwright');

async function launchBrowser(headless = false) 
  const browser = await chromium.launch( headless );
  const context = await browser.newContext();
  const page = await context.newPage();
  return  browser, context, page ;


module.exports =  launchBrowser ;

Langkah 4

Tambahkan bantuan penyembuhan diri ke helper.js dokumen.

Fitur ini dirancang untuk “ego” dengan mencoba beberapa pemilih alternatif saat mencoba mengklik elemen. Jika satu pemilih gagal (misalnya, karena perubahan dalam struktur halaman), ia secara otomatis mencoba yang berikutnya sampai dicoba atau semua.

// Self-healing helper with a shorter wait timeout per selector
async function clickWithHealing(page, selectors) 
    for (const selector of selectors) 
      try 
        console.log(`Trying selector: $selector`);
        await page.waitForSelector(selector,  timeout: 2000 ); // reduced to 2000ms per selector
        await page.click(selector);
        console.log(`Clicked using selector: $selector`);
        return;
       catch (err) 
        console.log(`Selector "$selector" not found. Trying next alternative...`);
      
    
    throw new Error(`None of the selectors matched: $selectors.join(", ")`);
  
  
  module.exports =  clickWithHealing ;

Langkah 5

ada add_to_cart.feature dokumen.

Feature: Add Item to Cart

  Scenario Outline: User adds an item to the cart successfully
    Given I navigate to the homepage
    When I add the "<itemtype>" item to the cart
    Then I should see the item in the cart
    Examples:
    |itemtype|
    |Pliers  |

Langkah 6

Menerapkan definisi langkah yang sesuai.

const  Given, When, Then, Before, After, setDefaultTimeout  = require('@cucumber/cucumber');
const  launchBrowser  = require('../utils/browserSetup');
const  clickWithHealing  = require('../utils/helpers');

// Increase default timeout for all steps to 60 seconds
setDefaultTimeout(60000);

let browser;
let page;

// Launch the browser before each scenario
Before(async function () 
  const launch = await launchBrowser(false); // set headless true/false as needed
  browser = launch.browser;
  page = launch.page;
);

// Close the browser after each scenario
After(async function () 
  await browser.close();
);

Given('I navigate to the homepage', async function () 
  await page.goto('
);

When('I add the string item to the cart', async function (itemName) 
  this.itemName = itemName;

  // Self-healing selectors for the product item
  const productSelectors = [
    `//img[@alt="$itemName"]`,
    `text=$itemName`,
    `.product-card:has-text("$itemName")`
  ];
  
  await clickWithHealing(page, productSelectors);
  await page.waitForTimeout(10000);

  // Self-healing selectors for the "Add to Cart" button
  const addToCartSelectors = [
    'button:has-text("Add to Cart")',
    '#add-to-cart',
    '.btn-add-cart'
  ];
  await clickWithHealing(page, addToCartSelectors);
);

Then('I should see the item in the cart', async function () 
  const cartIconSelectors = [
    'a[href="
    '//a[@data-test="nav-cart"]',
    'button[aria-label="cart"]',
    '.cart-icon'
  ];
  await clickWithHealing(page, cartIconSelectors);
  const itemInCartSelector = `text=$this.itemName`;
  await page.waitForSelector(itemInCartSelector,  timeout: 10000 );
);

Langkah 7

Tambahkan ke cucumber.js dokumen.

File Cucumber.js adalah file konfigurasi untuk cucumber.js yang memungkinkan Anda untuk menyesuaikan bagaimana tes dijalankan.

Kami akan menggunakan file ini untuk mendefinisikannya

• Jalur file fungsi
• Langkah untuk mendefinisikan lokasi

module.exports = 
    default: `--require tests/steps/**/*.js tests/features/**/*.feature --format summary `
;

Langkah 8

memperbarui pakage.json Tambahkan skrip.

"scripts": 
    "test": "cucumber-js"
  ,

Langkah 9

Jalankan skrip uji.

Hasil Eksekusi Uji:

Seperti yang dapat Anda lihat di tangkapan layar di atas, kode mencoba menemukan pemilih satu[href=" and when it couldn’t find the selector, the code moved on to finding the next alternative selector //a[@data-test="nav-cart"]ini berhasil;

Pengakuan Elemen Cerdas + Strategi Posisi Berganda

Mari kita ambil contoh untuk mengeksplorasi cara memasukkan beberapa strategi locator ke dalam pengujian penyembuhan diri yang digerakkan oleh AI menggunakan metode fallback. Idenya adalah untuk mencoba masing-masing locator yang diketahui dalam urutan yang telah ditentukan sebelum semua pencari yang diketahui gagal menggunakan fallback berbasis ML.

Tinjauan Tingkat Lanjut

1. Beberapa strategi penentuan posisi. Pertahankan daftar locator potensial (mis. CSS, XPath, berbasis teks, dll.). Tes Anda mencoba secara bergantian.
2. Cadangan ai/ml. Jika semua pencari lokasi yang diketahui gagal, tangkap tangkapan layar dan hubungi model ML Anda untuk mendeteksi elemen secara visual.

Berikut adalah contoh metode penyembuhan diri yang digerakkan oleh AI yang menunjukkan cara mengintegrasikan tensorflow.js (khususnya @tensorflow/tfjs-node) Mengeksekusi fallback berbasis pembelajaran mesin. Kami akan memperluas fungsi FindElementsML untuk memuat model ML, menjalankan inferensi pada tangkapan layar, dan kemudian menguraikan hasilnya untuk menemukan elemen UI target.

catatan: Di dunia nyata, Anda akan memiliki model deteksi objek terlatih atau model klasifikasi gambar yang tahu cara mendeteksi elemen UI tertentu (mis., Tombol Add to Cart). Untuk ilustrasi, kami akan menunjukkan pseudocode yang digunakan untuk memuat model dan menguraikan prediksi kotak pembatas. Model dan pemetaan label yang sebenarnya akan tergantung pada data dan metode pelatihan Anda.

Langkah 1

Mari kita mulai menyiapkan proyek penulis naskah dan menginstal dependensi (mentimun dan TensorFlow).

npm install --save-dev @cucumber/cucumber

npm install @tensorflow/tfjs-node

Langkah 2

Buat struktur folder berikut dan tambahkan file yang diperlukan:

• Folder model berisi terlatih TF.js File model (seperti model.json dan file berat badan terkait).
• aiLocator.js Muat model dan jalankan inferensi saat dibutuhkan.
• locatorHelper.js Coba beberapa pencari lokasi standar dan kemudian hubungi AI Fallback dalam semua kasus.

Langkah 3

Mari kita locatorHelper.js dokumen.

File ini berisi fitur aksesibilitas yang memungkinkan elemen ditemukan menggunakan beberapa kebijakan locator. Jika semua gagal, itu akan didelegasikan ke bek AI.

Banyak pencari locator

• Fungsi ini mengambil locator (locator) dan setiap pencari locator dicoba secara bergantian.
• Jika locator berhasil, kami segera kembali.

AI Defender

• Jika semua locator standar gagal, kami menangkap tangkapan layar dan menelepon findElementUsingML Fungsi untuk mendapatkan koordinat kotak pembatas dari elemen target.
• Jika koordinat ditemukan, koordinat dikembalikan, dan jika AI juga gagal, koordinat dikembalikan.

Langkah 4

Di util/ailocator.js, kami mensimulasikan locator berbasis ML. Dalam implementasi produksi, Anda memuat model ML terlatih (misalnya, menggunakan TensorFlow.js) untuk memproses tangkapan layar dan kembali ke lokasi tombol Tambah ke CART (kotak pembatas).

const  findElementUsingML  = require('./aiLocator');

async function findElement(page, screenshotPath, locators, elementLabel) {
  for (const locator of locators) 
    try 
      const element = await page.$(locator);
      if (element) 
        console.log(`Element found using locator: "$locator"`);
        return  element, usedAI: false ;
      
     catch (error) 
      console.log(`Locator failed: "$locator" -> $error`);
    
  

  // If all locators fail, attempt AI-based fallback
  console.log(`All standard locators failed for "$elementLabel". Attempting AI-based locator...`);
  await page.screenshot( path: screenshotPath );
  const coords = await findElementUsingML(screenshotPath, elementLabel);
  if (coords) 
    console.log(`ML located element at x=$coords.x, y=$coords.y`);
    return  element: coords, usedAI: true ;
  

  return null;
}

module.exports =  findElement ;

Langkah 5

Mari kita aiLocator.js dokumen.

Berikut adalah contoh tiruan tentang bagaimana Anda dapat memuat dan menjalankan inferensi menggunakan tensorflow.js (menggunakan @tensorflow/tfjs-node), parse kotak pembatas, dan pilih koordinat tombol Tambah ke Keranjang.

Penafian: Kode berikut menunjukkan struktur keseluruhan. Anda memerlukan model terlatih yang dapat mendeteksi atau mengklasifikasikan elemen UI (misalnya, model deteksi objek khusus). Kode aktual yang mem -parsing prediksi akan tergantung pada bagaimana model Anda menghasilkan kerangka kerja, kelas, dan skor.

// util/aiLocator.js
const tf = require('@tensorflow/tfjs-node');
const fs = require('fs');
const path = require('path');

// For demonstration, we store a global reference to the loaded model
let model = null;

/**
 * Loads the TF.js model from file system, if not already loaded
 */
async function loadModel() 
  if (!model) 
    const modelPath = path.join(__dirname, 'model', 'model.json');
    console.log(`Loading TF model from: $modelPath`);
    model = await tf.loadGraphModel(`file://$modelPath`);
  
  return model;


/**
 * findElementUsingML
 * @param string screenshotPath - Path to the screenshot image.
 * @param string elementLabel - The label or text of the element to find.
 * @returns Promise<x: number, y: number> - Coordinates of the element center.
 */
async function findElementUsingML(screenshotPath, elementLabel) 
  console.log(`Running ML inference to find element: "$elementLabel"`);

  try 
    // 1. Read the screenshot file into a buffer
    const imageBuffer = fs.readFileSync(screenshotPath);

    // 2. Decode the image into a tensor [height, width, channels]
    const imageTensor = tf.node.decodeImage(imageBuffer, 3);

    // 3. Expand dims to match model's input shape: [batch, height, width, channels]
    const inputTensor = imageTensor.expandDims(0).toFloat().div(tf.scalar(255));

    // 4. Load (or retrieve cached) model
    const loadedModel = await loadModel();

    // 5. Run inference
    //    The output structure depends on your model (e.g., bounding boxes, scores, classes)
    //    For instance, an object detection model might return:
    //    
    //      boxes: [ [y1, x1, y2, x2], ... ],
    //      scores: [ ... ],
    //      classes: [ ... ]
    //    
    const prediction = await loadedModel.executeAsync(inputTensor);

    // Example: Suppose your model returns an array of Tensors: [boxes, scores, classes]
    //   boxes: shape [batch, maxDetections, 4]
    //   scores: shape [batch, maxDetections]
    //   classes: shape [batch, maxDetections]
    //
    // NOTE: The exact shape/names of the outputs differ by model architecture.
    const [boxesTensor, scoresTensor, classesTensor] = prediction;

    const boxes = await boxesTensor.array();    // shape: [ [ [y1, x1, y2, x2], ... ] ]
    const scores = await scoresTensor.array();  // shape: [ [score1, score2, ... ] ]
    const classes = await classesTensor.array(); // shape: [ [class1, class2, ... ] ]

    // We'll assume only 1 batch => use boxes[0], scores[0], classes[0]
    const b = boxes[0];
    const sc = scores[0];
    const cl = classes[0];

    // 6. Find the bounding box for "Add to Cart" or the best match for the given label
    //    In a real scenario, you might have a class index for "Add to Cart"
    //    or a text detection pipeline. We'll do a pseudo-search for a known class ID.
    let bestIndex = -1;
    let bestScore = 0;

    for (let i = 0; i < sc.length; i++) 
      const classId = cl[i];
      // Suppose "Add to Cart" is class ID 5 in your model (completely hypothetical).
      // Or if you have a text-based detection approach, you’d match on the text.
      if (classId === 5 && sc[i] > bestScore) 
        bestScore = sc[i];
        bestIndex = i;
      
    

    // If we found a bounding box with decent confidence
    if (bestIndex >= 0 && bestScore > 0.5) 
      const [y1, x1, y2, x2] = b[bestIndex];
      console.log(`Detected bounding box for "$elementLabel" -> [$y1, $x1, $y2, $x2] with score $bestScore`);

      // Convert normalized coords to actual pixel coords
      const  width, height  = imageTensor.shape; // shape is [height, width, 3]
      const top = y1 * height;
      const left = x1 * width;
      const bottom = y2 * height;
      const right = x2 * width;

      // Calculate the center of the bounding box
      const centerX = left + (right - left) / 2;
      const centerY = top + (bottom - top) / 2;

      // Clean up tensors to free memory
      tf.dispose([imageTensor, inputTensor, boxesTensor, scoresTensor, classesTensor, prediction]);

      return  x: Math.round(centerX), y: Math.round(centerY) ;
    

    // If no bounding box matched the criteria, return null
    console.warn(`No bounding box found for label "$elementLabel" with sufficient confidence.`);
    tf.dispose([imageTensor, inputTensor, boxesTensor, scoresTensor, classesTensor, prediction]);
    return null;

   catch (error) 
    console.error('Error running AI locator:', error);
    return null;
  


module.exports =  findElementUsingML ;

Mari kita pahami proses pembelajaran mesin.

1. Memuat model

• Kami pertama -tama memuat model TensorFlow.js pretrained dari file.
  Untuk meningkatkan kinerja, kami menyimpan model dalam memori sehingga tidak akan memuat ulang setiap kali kami menggunakannya.

2. Siapkan gambar

• Mendekode gambar. Konversikan ke format yang dipahami model.
• Tambahkan dimensi batch. Membentuk kembali agar sesuai dengan format input model.
• Nilai piksel yang dinormalisasi. Skala nilai piksel 0 dan 1 Meningkatkan akurasi.

3. Jalankan inferensi (buat prediksi)

• Kami meneruskan gambar yang diproses ke dalam model untuk analisis.
• Untuk deteksi objek, output model:
  • Koordinat kotak batas (Posisi objek dalam gambar).
  • Skor kepercayaan diri (Seberapa yakin model prediksi).
  • Tag objek (mis., “kucing”, “mobil”, “anjing”).

4. Prediksi proses

• Tentukan prediksi yang paling percaya diri.
  Konversi koordinat output model ke posisi piksel yang sebenarnya pada gambar.

5. Hasil pengembalian

• Jika suatu objek terdeteksi, kembalikan koordinat pusatnya (x, y).
• Jika objek tidak ditemukan atau kepercayaan itu terlalu rendah, kembalikan nol.

6. Pembersihan memori

• Karena TensorFlow.js berjalan pada GPU, kita harus memproses data sementara setelah digunakan untuk membebaskan memori.

Langkah 6

File fungsi.

Feature: Add Item to Cart

  Scenario Outline: User adds an item to the cart successfully
    Given I navigate to the homepage
    When I add the "<itemtype>" item to the cart
    Then I should see the item in the cart
    Examples:
    |itemtype|
    |Pliers  |

Langkah 7

Definisi Langkah.

1. Addtocartlocators

• Kami menyimpan beberapa locator (CS, teks, xpath) dalam array.
• Tes dicoba dalam urutan yang terdaftar.

2. Menemukan

• Jika tidak ada locator yang tersedia, gunakan fallback berbasis ML untuk menemukan koordinat.
• Nilai pengembalian memberi tahu kami apakah kami menggunakan AI Fallback (usedAI: true) atau elemen DOM standar (usedAI: false).

3. Klik Elemen

• Jika kami memiliki pemrosesan DOM nyata, kami akan menelepon element.click().
• Jika kami mendapatkan koordinat dari bek AI, kami menelepon page.mouse.click(x, y).

// step_definitions/steps.js
const  Given, When, Then  = require('@cucumber/cucumber');
const  chromium  = require('playwright');
const path = require('path');
const  findElement  = require('../util/locatorHelper');

let browser, page;

Given('I navigate to the homepage', async function () 
  browser = await chromium.launch( headless: true );
  page = await browser.newPage();
  await page.goto('
);

When('I add the string item to the cart', async function (itemName) 

    // Define multiple possible locators for the Add to Cart button
    const productSelectors = [
        `//img[@alt="$itemName"]`,
        `text=$itemName`,
        `.product-card:has-text("$itemName")`
      ];

      await page.waitForTimeout(10000);

      // Attempt to find the element using multiple locators, then AI fallback
      const screenshotPath = path.join(__dirname, 'page.png');
      const found = await findElement(page, screenshotPath, productSelectors, 'Select Product');
    
      if (!found) 
        throw new Error('Failed to locate the Add to Cart button using all strategies and AI fallback.');
      
    
      if (!found.usedAI) 
        // We have a DOM element handle
        await found.element.click();
       else 
        // We have x/y coordinates from AI
        await page.mouse.click(found.element.x, found.element.y);
      

  // Define multiple possible locators for the Add to Cart button
  const addToCartLocators = [
    'button.add-to-cart',            // CSS locator
    'text="Add to Cart"',            // Playwright text-based locator
    '//button[contains(text(),"Add")]', // XPath
  ];

  // Attempt to find the element using multiple locators, then AI fallback
  const screenshotPath1 = path.join(__dirname, 'page1.png');
  const found1 = await findElement(page, screenshotPath, addToCartLocators, 'Add to Cart');

  if (!found) 
    throw new Error('Failed to locate the Add to Cart button using all strategies and AI fallback.');
  

  if (!found.usedAI) 
    // We have a DOM element handle
    await found.element.click();
   else 
    // We have x/y coordinates from AI
    await page.mouse.click(found.element.x, found.element.y);
  
);

Then('I should see the item in the cart', async function () 
  // Wait for cart item count to appear or update
  await page.waitForSelector('.cart-items-count',  timeout: 5000 );
  const countText = await page.$eval('.cart-items-count', el => el.textContent.trim());
  if (parseInt(countText, 10) <= 0) 
    throw new Error('Item was not added to the cart.');
  
  console.log('Item successfully added to the cart.');
  await browser.close();
);

Tes penyembuhan diri menggunakan TensorFlow.js melibatkan:

1. Banyak pencari locator. Coba Locator Standar (CSS, XPath, Berbasis Teks).
2. Tangkapan layar + inferensi ml. Jika locator standar gagal, ambil tangkapan layar, muat ke dalam model TF.js, dan jalankan deteksi objek (atau metode khusus) untuk menemukan elemen UI yang diinginkan.
3. Klik pada koordinat. Konversikan kotak pembatas yang diprediksi ke koordinat piksel dan menginstruksikan penulis naskah untuk mengklik posisi itu.

sebagai kesimpulan

Pendekatan ini memberikan fallback yang kuat, dan jika Anda melatih model ML Anda untuk mengenali isyarat visual untuk elemen target, Anda dapat beradaptasi dengan perubahan UI. Seiring perkembangan UI, Anda dapat melatih kembali model atau menambahkan contoh baru untuk meningkatkan akurasi deteksi, sehingga menghilangkan kebutuhan untuk tes “disembuhkan” tanpa perlu pemilih baru untuk kode kode keras.