Clever Geek Handbook

Autotests basierend auf Dramatiker und Scherz

Selen ist seit langem das Hauptwerkzeug für die Testautomatisierung. Derzeit gibt es jedoch einige anständige Alternativen auf dem Markt, wie Cypress, Puppeteer und Playwright . Dramatiker werden wir in diesem Artikel betrachten.



Playwright ist eine Knoten-Testautomatisierungsbibliothek mit einer einzigen API für verschiedene Browser (Chromium, Firefox und WebKit). Entwickelt von Microsoft. Meiner Meinung nach ist der Hauptvorteil von Playwright die enge Integration mit Browsern und die Möglichkeit, mit Browsern auf einer für Selenium unzugänglichen Ebene zu interagieren.



Ein Open Source-Produkt, Kanboard, wird als Testobjekt bereitgestellt .



Zum Testen verwenden wir Node Js, Dramatiker, Scherz, Scherz-Dramatiker-Preset und Scherz-HTML-Reporter. Wir verwenden Playwright, um mit Browsern zu interagieren. Wir verwenden Jest als Testläufer. Jest-HTML-Reporter werden benötigt, um einen HTML-Bericht zu erstellen.



Der erste Schritt ist es, einen Knoten erstellen Projekt und alle notwendigen Abhängigkeiten installieren:



npm init

npm i -D playwright

npm install --save-dev jest

npm install -D jest-playwright-preset

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



Nach dem Ausführen dieser Befehle erhalten wir package.json und node_modules mit den erforderlichen Abhängigkeiten. Um einen Bericht und einen Ordner mit Tests einzurichten, nehmen wir Änderungen an package.json for jest vor:



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


Der nächste Schritt ist das Erstellen von Seitenobjekten:



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


Der Test sieht folgendermaßen aus:



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


Über die Leitung browser = await chromium.launch({headless: config.web.headless == "true",slowMo: parseInt(config.web.sloMo, 10),});können Sie den Headless-Modus und die Verzögerung konfigurieren.



Mit dem Codeblock beforeEachkönnen Sie einen Netzwerkeintrag einrichten, der folgendermaßen aussieht:



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


Fügen Sie config.js hinzu, um diese Parameter steuern zu können



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;


Sie können jetzt die folgenden Befehle verwenden, um Tests auszuführen:



npm run test Testlauf mit Standardwerten (Headless false, sloMo 50, Netzwerk aus)



NETWORK = 'on' npm run test Testlauf mit Werten Headless false, sloMo 50, Networking on



HEADLESS = 'true' npm run test Testlauf mit Werten Headless true, sloMo 50, Netzwerk aus



Nach dem Ausführen der Tests wird ein Bericht erstellt - jest_html_reporters.html



Bild



Vielen Dank für Ihre Aufmerksamkeit und ich hoffe, dieser Artikel war hilfreich für Sie.



More articles:


All Articles