الاختبارات الآلية على أساس الكاتب المسرحي ومازح

لفترة طويلة ، كان السيلينيوم هو الأداة الرئيسية لأتمتة الاختبار. ومع ذلك ، هناك العديد من البدائل اللائقة حاليًا في السوق مثل Cypress و Puppeteer و Playwright . سننظر في الكاتب المسرحي في هذه المقالة.

Playwright هي مكتبة أتمتة اختبار العقدة js مع واجهة برمجة تطبيقات واحدة لمتصفحات مختلفة (Chromium و Firefox و WebKit). طور بواسطة مايكروسوفت. في رأيي ، تتمثل الميزة الرئيسية لـ Playwright في تكامله الوثيق مع المتصفحات والقدرة على التفاعل مع المتصفحات بمستوى لا يمكن الوصول إليه بواسطة السيلينيوم.

يتم نشر منتج مفتوح المصدر ، Kanboard ، ككائن اختبار .

للاختبار ، سنستخدم node js و playwrite و jest و jest-playwright-preset و jest-html-clients. نحن نستخدم Playwright للتفاعل مع المتصفحات. نحن نستخدم Jest كعداء اختبار. هناك حاجة لمراسلي Jest-html لإنشاء تقرير HTML.

الخطوة الأولى هي إنشاء مشروع عقدة وتثبيت جميع التبعيات الضرورية:

npm init

npm i -D playwright

npm install --save-dev jest

npm install -D jest-playwright-preset

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

بعد تشغيل هذه الأوامر ، نحصل على package.json و node_modules بالتبعيات المطلوبة. من أجل إعداد تقرير ومجلد به اختبارات ، نجري تغييرات على package.json من أجل الدعابة:

{
  "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"
  }
}

الخطوة التالية هي إنشاء كائنات الصفحة:

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 };

سيبدو الاختبار كما يلي:

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);
});

browser = await chromium.launch({headless: config.web.headless == "true",slowMo: parseInt(config.web.sloMo, 10),});يتيح لك الخط تكوين وضع مقطوعة الرأس والتأخير.

beforeEachيتيح لك مقطع التعليمات البرمجية إعداد إدخال شبكة يبدو كالتالي:

>> 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
....

لتتمكن من التحكم في هذه المعلمات ، أضف 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;

يمكنك الآن استخدام الأوامر التالية لإجراء الاختبارات:

npm run test اختبار التشغيل بالقيم الافتراضية (Headless false ، sloMo 50 ، إيقاف الشبكات)

NETWORK = 'on' npm run test اختبار التشغيل باستخدام القيم بدون رأس ، و sloMo 50 ، وتشغيل الشبكات

HEADLESS = 'true' npm run test اختبار التشغيل بقيم بدون رأس صحيح ، sloMo 50 ، إيقاف تشغيل الشبكات

بعد إجراء الاختبارات ، سيتم إنشاء تقرير - jest_html_reporters.html

شكرا لاهتمامكم وآمل أن يكون هذا المقال مفيدا لكم.