Khi phát triển ứng dụng Vue cho thương mại điện tử, việc kiểm thử các quy trình xuyên trang như quản lý giỏ hàng hoặc xác nhận đơn hàng thường gặp nhiều thách thức. Trạng thái sản phẩm phân tán giữa Vuex store, dữ liệu cục bộ, và URL query đòi hỏi kiểm tra đồng bộ chính xác ở mỗi bước. Kiểm thử thủ công lặp lại các thao tác click, điền form, và kiểm tra DOM gây tốn thời gian, dễ bỏ sót khi có thay đổi yêu cầu từ sản phẩm.

Playwright kết hợp công cụ AI giúp giải quyết bài toán này: AI chuyển đổi mô tả bằng ngôn ngữ tự nhiên thành mã kiểm thử cơ bản, còn Playwright thực thi tác vụ với độ chính xác cao và kiểm tra sâu trạng thái nội bộ ứng dụng. Sự kết hợp này tạo ra hệ thống kiểm thử tự động tin cậy, giảm 70% thời gian duy trì kịch bản so với phương pháp truyền thống.

Để triển khai, bắt đầu với môi trường cơ bản. Cài đặt Node.js (v16+) và khởi tạo dự án:

mkdir vue-e2e-test && cd vue-e2e-test
npm init -y

Cài đặt Playwright Test Runner:

npx playwright install
npm install @playwright/test

Tạo cấu trúc dự án Vue 3 đơn giản với Vuex:

vue-shop-demo/
├── src/
│   ├── views/
│   │   ├── ProductPage.vue
│   │   ├── CartView.vue
│   │   └── CheckoutPage.vue
│   ├── store/
│   │   └── cartModule.js
│   └── main.js

Module Vuex quản lý giỏ hàng (src/store/cartModule.js):

import { createStore } from 'vuex';

export default createStore({
  state: {
    cartProducts: []
  },
  mutations: {
    addProduct(state, item) {
      const found = state.cartProducts.find(p => p.id === item.id);
      if (found) found.count += 1;
      else state.cartProducts.push({ ...item, count: 1 });
    },
    adjustQuantity(state, { id, newCount }) {
      const product = state.cartProducts.find(p => p.id === id);
      if (product) product.count = newCount;
    },
    resetCart(state) {
      state.cartProducts = [];
    }
  },
  getters: {
    totalItems: state => state.cartProducts.reduce((sum, p) => sum + p.count, 0),
    totalPrice: state => state.cartProducts.reduce((sum, p) => sum + p.price * p.count, 0)
  }
});

Cấu hình Playwright (playwright.config.js):

const { defineConfig } = require('@playwright/test');

module.exports = defineConfig({
  testDir: 'e2e-tests',
  use: {
    baseURL: 'http://localhost:3000',
    viewport: { width: 1280, height: 720 },
    headless: true
  },
  projects: [
    {
      name: 'chrome',
      use: { ...require('@playwright/test').devices['Desktop Chrome'] }
    }
  ]
});

Trong kịch bản kiểm thử, Playwright sẽ tương tác với giao diện như người dùng thực, đồng thời truy vấn trực tiếp Vuex state thông qua window.__VUE_DEVTOOLS_GLOBAL_HOOK__.store để xác minh tính nhất quán dữ liệu giữa các trang.