👩‍💻 🧖🏿 🕰️ Autotests berdasarkan dramawan dan lelucon 🖲️ 🚴🏻 🌻

Untuk waktu yang lama, Selenium telah menjadi alat utama untuk otomatisasi pengujian. Namun, ada beberapa alternatif yang layak saat ini di pasaran seperti Cypress, Puppeteer, dan Playwright . Penulis drama akan kita bahas di artikel ini.

Playwright adalah pustaka otomatisasi pengujian node js dengan API tunggal untuk browser yang berbeda (Chromium, Firefox dan WebKit). Dikembangkan oleh Microsoft. Menurut pendapat saya, keunggulan utama Playwright adalah integrasi yang erat dengan browser dan kemampuan untuk berinteraksi dengan browser pada tingkat yang tidak dapat diakses oleh Selenium.

Produk open source, Kanboard, digunakan sebagai objek pengujian .

Untuk pengujian, kami akan menggunakan node js, playwright, jest, jest-playwright-preset, dan jest-html-reporters. Kami menggunakan Playwright untuk berinteraksi dengan browser. Kami menggunakan Jest sebagai pelari pengujian. Jest-html-reporter dibutuhkan untuk menghasilkan laporan HTML.

Langkah pertama adalah membuat proyek node dan menginstal semua dependensi yang diperlukan:

npm init

npm i -D playwright

npm install --save-dev jest

npm install -D jest-playwright-preset

npm install jest-html-reporters --save-dev

Setelah menjalankan perintah ini, kita mendapatkan package.json dan node_modules dengan dependensi yang diperlukan. Untuk menyiapkan laporan dan folder dengan tes, kami membuat perubahan pada package.json untuk lelucon:

{
  "name": "kb-playwright-tests",
  "version": "1.0.0",
  "description": "An automation test framework which is based on playwright.",
  "main": "index.js",
  "scripts": {
    "test": "jest"
  },
  "author": "",
  "license": "ISC",
  "jest": {
    "testMatch": [
      "**/tests/**/*.[jt]s?(x)",
      "**/?(*.)+(spec|test).[jt]s?(x)"
    ],
    "reporters": [
      "default",
      "jest-html-reporters"
    ]
  },
  "devDependencies": {
    "jest": "^26.6.3",
    "jest-html-reporters": "^2.1.0",
    "jest-playwright-preset": "^1.4.0",
    "playwright": "^1.6.1"
  }
}

Langkah selanjutnya adalah membuat objek halaman:

const { DashboardPage } = require("./DashboardPage");
var config = require('../config');

class SignInPage {
  constructor(page) {
    this.page = page;
  }

  async openSignInPage() {
    await this.page.goto(config.web.url);
  }

  async signInAs(user) {
    await this.page.fill("css=#form-username", user.username);
    await this.page.fill("css=#form-password", user.password);
    await this.page.click("css=button[type='submit']");
    return new DashboardPage(this.page);
  }
}
module.exports = { SignInPage };

 class DashboardPage {
  constructor(page) {
    this.page = page;
  }
}
module.exports = { DashboardPage };

Tesnya akan terlihat seperti ini:

const { chromium } = require("playwright");
const { SignInPage } = require("../pageobjectmodels/SignInPage");
const { roles } = require("../enums/roles");
const assert = require("assert");
var config = require("../config");
let browser;
let page;

beforeAll(async () => {
  console.log("headless : " + config.web.headless);
  console.log("sloMo : " + config.web.sloMo);
  browser = await chromium.launch({
    headless: config.web.headless == "true",
    slowMo: parseInt(config.web.sloMo, 10),
  });
});
afterAll(async () => {
  await browser.close();
});
beforeEach(async () => {
  page = await browser.newPage();
  if (config.web.networkSubscription) {
    page.on("request", (request) =>
      console.log(">>", request.method(), request.url())
    );
    page.on("response", (response) =>
      console.log("<<", response.status(), response.url())
    );
  }
});
afterEach(async () => {
  await page.close();
});

test("An admin is able to see a dashboard", async () => {
  const signInPage = new SignInPage(page);
  await signInPage.openSignInPage();
  const dashboardPage = await signInPage.signInAs(roles.ADMIN);
  const dashboard = await dashboardPage.page.$("#dashboard");
  assert(dashboard);
});

Garis browser = await chromium.launch({headless: config.web.headless == "true",slowMo: parseInt(config.web.sloMo, 10),});memungkinkan Anda untuk mengonfigurasi mode tanpa kepala dan penundaan.

Blok kode beforeEachmemungkinkan Anda menyiapkan entri jaringan yang terlihat seperti ini:

>> GET http://localhost/kanboard/
<< 302 http://localhost/kanboard/
>> GET http://localhost/kanboard/?controller=AuthController&action=login
<< 200 http://localhost/kanboard/?controller=AuthController&action=login
>> GET http://localhost/kanboard/assets/css/vendor.min.css?1576454976
>> GET http://localhost/kanboard/assets/css/app.min.css?1576454976
>> GET http://localhost/kanboard/assets/js/vendor.min.js?1576454976
....

Untuk dapat mengontrol parameter ini, tambahkan config.js

var config = {};
config.web = {};

config.web.url = process.env.URL || "http://localhost/kanboard/";
config.web.headless = process.env.HEADLESS || false;
config.web.sloMo = process.env.SLOMO || 50;
config.web.networkSubscription = process.env.NETWORK;

module.exports = config;

Sekarang Anda dapat menggunakan perintah berikut untuk menjalankan pengujian:

npm run test uji coba dengan nilai default (Headless false, sloMo 50, jaringan nonaktif)

NETWORK = 'on' npm run test uji coba dengan nilai Headless false, sloMo 50, networking on

HEADLESS = 'true' npm run test uji coba dengan nilai Headless true, sloMo 50, networking off

Setelah menjalankan pengujian, laporan akan dibuat - jest_html_reporters.html

gambar

Terima kasih atas perhatiannya dan semoga artikel ini bermanfaat bagi Anda.

Autotests berdasarkan dramawan dan lelucon

More articles: