Mulai Playwright untuk pengujian komponen – Beragampengetahuan
8 mins read

Mulai Playwright untuk pengujian komponen – Beragampengetahuan

Maximal0Tagged , , , , ,

Menemukan bug di awal siklus hidup pengembangan perangkat lunak (SDLC) menghemat waktu dan uang. Dalam pengujian komponen, pendekatan ini melibatkan pengujian masing-masing komponen atau modul secara individual untuk memverifikasi fungsionalitasnya dan memastikannya memenuhi persyaratan. Jenis pengujian ini dapat menangkap masalah di awal proses pengembangan, mengurangi biaya dan kerumitan memperbaiki bug di kemudian hari.

Penulis naskah dapat digunakan untuk pengujian komponen. Ini menyediakan cara untuk secara otomatis menguji masing-masing komponen aplikasi web di lingkungan browser yang sebenarnya.

Posting blog ini menjelaskan:

  • Cara mengatur komponen React.
  • Cara menguji komponen React dengan bantuan Playwright.

Contents

Apa itu pengujian komponen?

Pengujian komponen adalah jenis pengujian perangkat lunak yang berfokus pada pengujian komponen individu dari sistem yang lebih besar secara independen dari komponen lainnya. Tujuan pengujian komponen adalah untuk memverifikasi bahwa setiap komponen berperilaku seperti yang diharapkan dan memenuhi persyaratan dan fungsi yang ditentukan sebelum mengintegrasikannya ke dalam sistem yang lebih besar. Pendekatan ini membantu mengidentifikasi dan memperbaiki masalah di awal proses pengembangan, menghasilkan produk akhir yang lebih stabil dan andal.

Penulis untuk pengujian komponen?

Playwright adalah kerangka kerja pengujian end-to-end aplikasi web populer yang memungkinkan Anda menguji komponen web di lingkungan browser nyata. Ini mendukung otomatisasi untuk browser seperti Chrome, Firefox, dan Safari, dan menyediakan API untuk berinteraksi dengan halaman, elemen, dan debugging.

Playwright mendukung pengujian komponen, yang berarti Anda dapat menulis pengujian untuk secara khusus menargetkan dan memverifikasi perilaku masing-masing komponen UI di aplikasi web Anda. Ini menjadikannya alat yang berguna untuk memastikan aplikasi Anda tetap stabil dan berfungsi dari waktu ke waktu.

Pengujian ujung ke ujung dan pengujian komponen

Pengujian end-to-end (E2E) dan pengujian komponen adalah dua jenis pengujian perangkat lunak yang berfokus pada berbagai aspek aplikasi.

pengujian ujung ke ujung

Pengujian end-to-end melibatkan pengujian seluruh aplikasi dari awal hingga akhir, mensimulasikan skenario penggunaan dunia nyata untuk memverifikasi bahwa aplikasi berfungsi seperti yang diharapkan pengguna. Tujuan pengujian end-to-end adalah untuk mengidentifikasi setiap masalah integrasi antara berbagai komponen aplikasi dan memastikan bahwa aplikasi tersebut memenuhi persyaratan.

uji komponen

Pengujian komponen, di sisi lain, berfokus pada pengujian satu komponen atau unit aplikasi secara terpisah. Tujuan pengujian komponen adalah untuk memverifikasi bahwa setiap komponen berfungsi seperti yang diharapkan dan memenuhi persyaratan sebelum mengintegrasikannya ke dalam aplikasi yang lebih besar.

Berikut adalah beberapa perbandingan antara pengujian end-to-end dan pengujian komponen


Keuntungan Pengujian Komponen

Pengujian komponen memiliki berbagai keunggulan, beberapa di antaranya dijelaskan di bawah ini

  • Modularitas yang ditingkatkan: Pengujian komponen memastikan bahwa setiap komponen sistem bekerja secara independen seperti yang diharapkan, meningkatkan modularitas, dan menyederhanakan pemeliharaan.
  • Mendeteksi cacat sejak dini: Pengujian komponen memungkinkan deteksi dini dan koreksi cacat, sehingga mengurangi biaya keseluruhan untuk memperbaiki bug.
  • Tingkatkan keandalan: Dengan menguji setiap komponen secara menyeluruh, keandalan keseluruhan sistem ditingkatkan.
  • pengembangan lebih cepat: Pengujian komponen memungkinkan pengembang untuk menguji bagian sistem dengan cepat, sehingga mempercepat pengembangan dan mengurangi waktu pengembangan secara keseluruhan.
  • Tingkatkan kolaborasi: Pengujian komponen memungkinkan tim atau pengembang yang berbeda untuk mengerjakan komponen sistem yang berbeda, sehingga meningkatkan kolaborasi dan mengurangi kemungkinan konflik.
  • isolasi: Dengan menguji masing-masing komponen secara terpisah, pengembang dapat lebih mudah mengidentifikasi dan memperbaiki masalah tanpa harus menyelidiki dan men-debug interaksi kompleks antara banyak komponen.
  • pengembangan lebih cepat: Pengujian komponen memungkinkan pengembang untuk menguji bagian sistem dengan cepat, sehingga mempercepat pengembangan dan mengurangi waktu pengembangan secara keseluruhan.
  • proses debug lebih cepat: Pengujian komponen memungkinkan pengembang dengan cepat menentukan sumber masalah tanpa harus mencari di seluruh sistem untuk menemukannya.
  • cakupan tes yang lebih baik: Dengan menguji masing-masing komponen, pengembang dapat memastikan bahwa setiap bagian dari sistem diuji secara menyeluruh, yang membantu meningkatkan cakupan pengujian secara keseluruhan.

permintaan terlebih dahulu

  1. Node diinstal.
  2. Kode VS diinstal.

Untuk tujuan demonstrasi, kami menggunakan menangkal Komponen react dan komponen lainnya akan Anda lihat nanti di DEMO.

Siapkan React App dan instal Playwright

Bagian ini menjelaskan cara mengatur komponen React, menginstal dan mengintegrasikan Playwright dengan React sebelum membuat pengujian komponen.

Langkah 1

Jalankan perintah berikut di terminal.

npx create-react-app react-app

Setelah menjalankan perintah di atas, seperti yang ditunjukkan pada gambar di bawah ini.

hasil perintah

Langkah 2

Buka direktori root dan jalankan perintah berikut untuk memulai aplikasi React.

Setelah menjalankan perintah, ‘npm mulai’ Mulai aplikasi reaksi dengan port.

Setelah menjalankan perintah, aplikasi react

Seperti yang Anda lihat di Visual Studio Code, proyek berhasil dibuat. Mari kita lihat seperti apa gambar di bawah ini.

kode studio visual

langkah 3

Anda dapat melihat bahwa aplikasi telah dimulai; mari kita lihat bagaimana kita dapat memulai proyek pengujian yang diuji dengan komponen Playwright.

Jalankan perintah berikut terhadap <>.

npm init playwright@latest -- --ct

Setelah menyelesaikan perintah di atas, opsi berikut akan ditampilkan untuk instalasi.memilih JavaScript.

sukses javascript
keberhasilan respon

Setelah berhasil memasang framework React, kamu bisa melihat screenshot di bawah ini.

React framework berhasil diinstal

langkah 4

Buka kode VS, Anda dapat melihat bahwa Playwright telah diinstal.

Buka kode VS, Anda dapat melihat bahwa Playwright telah diinstal.

Menguji komponen React dengan Playwright

Contoh 1

Mari menulis pengujian komponen pertama kita dan mengujinya dengan Playwright

Mari perbarui nama file yang ada src/App.test.js -> App.spec.js Dan buat file App.js.

src/App.test.js -> App.spec.js” data-src=”https://dz2cdn1.beragampengetahuan.com/storage/temp/16837402-1681732534924.png”/><br /> </figure> <p>Tulis di bawah kode di bawah ini <strong>App.js.</strong></p> <div class= 
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
    
  );
}

export default App;

Tulis kasus uji komponen berikut di bawah ini App.spec.js.

import { test, expect } from '@playwright/experimental-ct-react';
import App from './App';

test.use({ viewport: { width: 500, height: 500 } });

test('Verify the text in React Page ', async ({ mount }) => {
  const component = await mount(<App />);
  await expect(component).toContainText('Learn React');
  await expect(component).toContainText('save to reload');
});

Mari kita jalankan test case menggunakan perintah berikut.

Setelah menjalankan perintah di atas, mari kita jalankan perintah yang diberikan di bawah ini.

npx playwright show-report

keluaran

Setelah menjalankan perintah di atas di bawah tampilan laporan, Anda dapat melihat dua teks di sana, “Learn React” dan “save to reload”.

belajar untuk menanggapi

Validasi teks di React Page

Contoh 2

Sekarang mari kita ambil contoh lain untuk diuji menangkal Komponen menggunakan Playwright.

Beri nama file js “QAAutomationLabs.js” dan nama spesifikasi “QAAutomationLabs.spec.js”.

QAAutomationLabs.spec.js.


Penutup skenario:

  1. Scene saat kita increment dengan mengklik icon (+).
  2. Scene saat kita decrement dengan mengklik icon (-).

Buat komponen baru di bawah folder src.

File QAAutomationLabs.js terlampir di bawah ini.

import { useState } from 'react'
export default function Counter({ initial = 0 }) {
    const [count, setCount] = useState(initial)

    return (
        <div style={{
            padding: 30
        }}>
            <button style={{ color: "black", backgroundColor: "green", margin: 10 }} aria-label="decrement" onClick={() => setCount(count - 1)}>
                -
            </button>
            <span data-cy="counter">{count}</span>
            <button style={{ color: "black", backgroundColor: "green", margin: 10 }} aria-label="increment" onClick={() => setCount(count + 1)}>
                +
            </button>
        </div>
    )
}

QAAutomationLabs.spec.js terlampir di bawah ini.

Dalam kasus uji di bawah ini, kami membahas dua skenario. “Kenaikan penghitung ganda” pertama. Kasus kedua, “naikkan dan kemudian kurangi penghitung”.

{ komponen const = menunggu untuk me-mount(); menunggu komponen.locator(incrementSelector).click(); menunggu mengharapkan(component.locator(counterSelector)).toHaveText(‘1’); menunggu komponen.locator(incrementSelector).klik(); menunggu mengharapkan(component.locator (counterSelector)).toHaveText(‘2’); }); test(‘Naikkan lalu kurangi Penghitung’, async ({ mount }) => { const component = await mount(); menunggu komponen.locator(incrementSelector).click(); menunggu mengharapkan(component.locator(counterSelector)).toHaveText(‘1’); menunggu komponen.locator(decrementSelector).klik(); menunggu mengharapkan(component.locator (counterSelector)).toHaveText(‘0’); });” data-lang=”teks/javascript”> 

import { test, expect } from '@playwright/experimental-ct-react';
import App from './QAAutomationLabs';
const counterSelector="[data-cy="counter"]";
  const incrementSelector = "[aria-label=increment]";
  const decrementSelector = "[aria-label=decrement]";
test.use({ viewport: { width: 500, height: 500 } });

test('Two time Increment in the Counter ', async ({ mount }) => {
  const component = await mount(<App />);
  await component.locator(incrementSelector).click();
  await expect(component.locator(counterSelector)).toHaveText('1');
  await component.locator(incrementSelector).click();
  await expect(component.locator(counterSelector)).toHaveText('2');
});

test('Increment then the decrement the Counter ', async ({ mount }) => {
  const component = await mount(<App />);
  await component.locator(incrementSelector).click();
  await expect(component.locator(counterSelector)).toHaveText('1');
  await component.locator(decrementSelector).click();
  await expect(component.locator(counterSelector)).toHaveText('0');
});

Mari kita jalankan test case menggunakan perintah berikut.

Setelah menjalankan perintah di atas, mari kita jalankan perintah yang diberikan di bawah ini.

npx playwright show-report

keluaran

Setelah menjalankan perintah di atas, laporan berikut akan ditampilkan.

QAAutomationLabs.spec.js

Dua kenaikan di konter.


bungkus

Pengujian komponen memiliki beberapa manfaat saat digunakan dengan Playwright, memungkinkan deteksi dini bug, meningkatkan kualitas kode, meningkatkan kepercayaan dalam perubahan kode, memfasilitasi pemfaktoran ulang, menyederhanakan pengujian integrasi, dan hemat biaya.

Selain itu, dengan menulis pengujian untuk masing-masing komponen, pengembang dipaksa untuk mempertimbangkan desain dan fungsionalitas kode mereka, yang dapat menghasilkan kualitas dan pemeliharaan kode yang lebih baik.

rencana pengembangan website



metode pengembangan website

jelaskan beberapa rencana untuk pengembangan website, proses pengembangan website, kekuatan dan kelemahan bisnis pengembangan website
, jasa pengembangan website, tahap pengembangan website, biaya pengembangan website

#Mulai #Playwright #untuk #pengujian #komponen

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Website https://beragampengetahuan.com

Related Posts