Pengiriman Produk yang Stabil dengan Cypress

Fei Han

February 7, 2021

Ecosystem

Apache APISIX Dashboard dirancang untuk memudahkan pengguna dalam mengoperasikan Apache APISIX melalui antarmuka front-end. Sejak proyek ini dimulai, telah ada 552 commit dan 10 rilis. Dengan iterasi produk yang begitu cepat, penting untuk memastikan kualitas produk open-source tersebut. Untuk alasan ini, kami telah memperkenalkan modul pengujian E2E untuk memastikan pengiriman produk yang stabil.

Apa itu Front-End E2E?

E2E, yang merupakan singkatan dari "End to End", dapat diterjemahkan sebagai pengujian "end-to-end". Ini meniru perilaku pengguna, dimulai dengan titik masuk dan menjalankan tindakan langkah demi langkah hingga pekerjaan selesai. Pengujian yang baik mencegah perubahan kode dari merusak logika asli.

Mengapa Cypress

Kami menggunakan Taiko, Puppeteer, TestCafe, dan Cypress untuk menulis kasus uji dalam membuat rute selama periode penelitian seleksi. Kami menggunakan setiap kerangka pengujian untuk menulis kasus dan merasakan fitur masing-masing.

Taiko memiliki karakteristik smart selector, yang dapat secara cerdas menemukan elemen yang ingin Anda operasikan berdasarkan konten teks dan hubungan lokasi, serta memiliki biaya awal yang rendah, sehingga Anda dapat menyelesaikan kasus uji dengan cepat. Namun, tidak ramah pengguna saat menulis kasus uji. Ketika pengguna keluar dari terminal secara tidak sengaja, semua kasus uji yang telah ditulis akan hilang, dan jika Anda ingin menjalankan kasus uji yang lengkap, Anda perlu menggunakannya bersama dengan test runner lainnya, yang tentu meningkatkan biaya pembelajaran bagi pengguna.

Puppeteer memiliki kinerja terbaik. Namun, pengujian bukanlah fokus Puppeteer. Ini banyak digunakan untuk web crawler. Proyek kami dimulai dengan Puppeteer, kerangka pengujian E2E resmi yang direkomendasikan oleh ANTD, dan setelah menggunakannya untuk beberapa waktu, kami menemukan bahwa Puppeteer tidak terlihat ramah bagi pengembang non-front-end dan sulit untuk melibatkan pengguna lain. Ketika pengguna menulis kasus uji, kurangnya penentuan posisi elemen yang cerdas membuat kurva pembelajaran sangat tinggi.

TestCafe sangat mudah diinstal, memiliki mekanisme tunggu bawaan sehingga pengguna tidak perlu aktif menunggu interaksi halaman, dan mendukung pengujian multi-browser secara bersamaan, yang membantu dalam pengujian kompatibilitas multi-browser. Kekurangannya adalah proses debugging tidak begitu ramah pengguna, dan Anda harus menjalankan kasus uji baru setelah setiap perubahan kasus uji. Bagi pengembang, mereka perlu memiliki beberapa sintaks Javascript dasar. Kedua, kecepatan berjalannya relatif lambat dibandingkan dengan beberapa kerangka lainnya, terutama saat menjalankan withText() untuk menemukan elemen.

Setelah perbandingan menyeluruh, kami akhirnya memilih Cypress sebagai kerangka E2E front-end kami, dengan menyebutkan empat alasan utama:

  1. Sintaks sederhana

Sintaks yang digunakan dalam pengujian Cypress sangat sederhana dan mudah dibaca serta ditulis. Dengan sedikit latihan, Anda dapat menguasai pembuatan kasus uji, yang penting untuk proyek open-source karena memungkinkan komunitas yang tertarik pada kasus uji E2E untuk berpartisipasi dalam menulis kasus uji dengan biaya pembelajaran minimal.

  1. Debugging yang mudah

Saat debugging kasus uji, kami dapat menggunakan Test Runner Cypress, yang menyajikan data multi-dimensi yang memungkinkan kami dengan cepat menemukan masalah.

  • Menunjukkan status eksekusi kasus uji, termasuk jumlah keberhasilan, kegagalan, dan yang sedang berjalan.
  • Menampilkan total waktu yang dihabiskan untuk eksekusi seluruh set uji.
  • Selector Playground bawaan untuk membantu menemukan elemen.
  • Menunjukkan setiap langkah eksekusi untuk setiap kasus uji dan membentuk snapshot yang dapat menunjukkan informasi tentang setiap langkah eksekusi setelah selesai.
  1. Komunitas yang aktif

Cypress memiliki komunitas pengguna yang besar, dan selalu ada banyak orang di dalam komunitas yang berbagi pengalaman dan ide mereka.

Ini membantu saat menghadapi masalah, dan Anda kemungkinan besar akan menghadapi masalah yang pernah dihadapi orang lain sebelumnya. Juga, ketika fitur baru diminta, kami dapat berpartisipasi dalam komunitas dengan mendiskusikan dan menambahkan fitur ke Cypress yang ingin kami tambahkan, seperti yang kami lakukan di komunitas APISIX: mendengarkan komunitas dan memberikan umpan balik.

  1. Dokumentasi yang jelas

Struktur dokumentasi Cypress lebih jelas dan komprehensif. Pada tahap awal penggunaan, kami dapat dengan cepat memperkenalkan Cypress ke proyek kami dan menulis kasus pertama kami berdasarkan panduan dokumentasi resmi. Selain itu, ada banyak dokumentasi yang tersedia di situs dokumentasi yang memberikan panduan yang baik kepada pengguna tentang apa yang merupakan praktik terbaik.

Cypress dan APISIX Dashboard

Saat ini ada 49 kasus uji yang ditulis untuk APISIX Dashboard. Kami mengonfigurasi CI yang sesuai di GitHub Action untuk memastikan bahwa kode lolos sebelum setiap penggabungan untuk memastikan kualitas kode. Kami berbagi penggunaan Cypress di APISIX Dashboard dengan Anda dengan merujuk pada praktik terbaik Cypress dan menggabungkannya dengan proyek kami.

image

  1. Fungsi yang umum digunakan dibungkus menjadi perintah.

Ambil login sebagai contoh, login adalah bagian penting untuk masuk ke sistem, jadi kami membungkusnya sebagai perintah, sehingga perintah login dapat dipanggil sebelum setiap kasus uji dijalankan.

Cypress.Commands.add("login", () => {
  cy.request(
    "POST",
    'http://127.0.0.1/apisix/admin/user/login',
    {
      username: "user",
      password: "user",
    }
  ).then((res) => {
    expect(res.body.code).to.equal(0);
    localStorage.setItem("token", res.body.data.token);
  });
});

beforeEach(() => {
   // init login
   cy.login();
})
  1. Ekstrak selector dan data sebagai variabel publik.

Untuk membuatnya lebih intuitif bagi pengguna untuk memahami arti dari kode uji, kami mengekstrak selector dan data sebagai variabel publik.

  const data = {
    name: 'hmac-auth',
    deleteSuccess: 'Delete Plugin Successfully',
  };
  const domSelector = {
    tableCell: '.ant-table-cell',
    empty: '.ant-empty-normal',
    refresh: '.anticon-reload',
    codemirror: '.CodeMirror',
    switch: '#disable',
    deleteBtn: '.ant-btn-dangerous',
  };
  1. Hapus cy.wait(someTime)

Kami menggunakan cy.wait(someTime) pada awal penggunaan Cypress, tetapi menemukan bahwa cy.wait(someTime) terlalu bergantung pada lingkungan jaringan dan kinerja mesin uji, yang dapat menyebabkan kasus uji melaporkan kesalahan ketika lingkungan jaringan atau kinerja mesin buruk. Praktik yang direkomendasikan adalah menggunakannya bersama dengan cy.intercept() untuk secara eksplisit menentukan sumber daya jaringan yang harus ditunggu.

cy.intercept("https://apisix.apache.org/").as("fetchURL");
cy.wait("@fetchURL");

Ringkasan

Saat ini, APISIX Dashboard telah menulis 49 kasus uji. Di masa depan, kami akan terus meningkatkan cakupan E2E front-end, dan meminta komunitas untuk setuju menulis kasus uji untuk setiap fitur baru atau perbaikan bug yang diajukan untuk memastikan stabilitas produk.

Selamat bergabung dengan kami untuk memoles produk gateway kelas dunia.

Alamat proyek: https://github.com/apache/apisix-dashboard

Tags:
APISIX Basics
Testing
Plugin