Use playwright to do browser testing (#429)

With some fixes, incl. installing Playwright dependencies into build container instead of at each test execution (by @vorburger, rest by @edewit)

Co-authored-by: Michael Vorburger <mike@vorburger.ch>

Author: edewit

Dockerfile-build

@@ -1,4 +1,14 @@
-FROM docker.io/library/openjdk:11-jdk as build
+FROM docker.io/library/ubuntu:22.04 as build
+
+RUN apt-get update -y
+
+# https://github.com/OASIS-learn-study/minecraft-storeys-maker/pull/429
+RUN apt-get install -y openjdk-11-jdk curl \
+                libgtk-3-0 libasound2 libx11-6 libxcomposite1 libxdamage1 libxext6 libxfixes3 \
+                libxrandr2 libxrender1 libxtst6 libpangocairo-1.0-0 libpango-1.0-0 \
+                libatk1.0-0 libcairo-gobject2 libcairo2 libgdk-pixbuf-2.0-0 \
+                libglib2.0-0 libdbus-glib-1-2 libdbus-1-3 libxcb-shm0 \
+                libx11-xcb1 libxcb1 libxcursor1 libxi6
 
 # https://github.com/nodesource/distributions/blob/master/README.md#installation-instructions
 RUN curl -fsSL https://deb.nodesource.com/setup_18.x | bash - && apt install -y nodejs && node --version

test-mineflayer/.gitignore

@@ -0,0 +1,4 @@
+node_modules/
+/test-results/
+/playwright-report/
+/playwright/.cache/

test-mineflayer/package-lock.json

@@ -4,14 +4,16 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "test": "mocha storeys.test.js --timeout 50000 --browser chrome"
+    "test": "mocha storeys.test.js --timeout 50000 --browser chrome",
+    "playwright": "npx playwright install && npx playwright test"
   },
   "author": "",
   "license": "ISC",
   "dependencies": {
     "mineflayer": "^4.2.0"
   },
   "devDependencies": {
+    "@playwright/test": "^1.27.1",
     "chai": "^4.3.6",
     "mocha": "^10.0.0"
   }

test-mineflayer/package.json

@@ -0,0 +1,94 @@
+// @ts-check
+const { devices } = require('@playwright/test');
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+
+/**
+ * @see https://playwright.dev/docs/test-configuration
+ * @type {import('@playwright/test').PlaywrightTestConfig}
+ */
+const config = {
+  testDir: './tests',
+  /* Maximum time one test can run for. */
+  timeout: 30 * 1000,
+  expect: {
+    /**
+     * Maximum time expect() should wait for the condition to be met.
+     * For example in `await expect(locator).toHaveText();`
+     */
+    timeout: 5000
+  },
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: 'html',
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
+    actionTimeout: 0,
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    // baseURL: 'http://localhost:3000',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'firefox',
+      use: {
+        ...devices['Desktop Firefox'],
+      },
+    },
+    /* Test against mobile viewports. */
+    // {
+    //   name: 'Mobile Chrome',
+    //   use: {
+    //     ...devices['Pixel 5'],
+    //   },
+    // },
+    // {
+    //   name: 'Mobile Safari',
+    //   use: {
+    //     ...devices['iPhone 12'],
+    //   },
+    // },
+
+    /* Test against branded browsers. */
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: {
+    //     channel: 'msedge',
+    //   },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: {
+    //     channel: 'chrome',
+    //   },
+    // },
+  ],
+
+  /* Folder for test artifacts such as screenshots, videos, traces, etc. */
+  // outputDir: 'test-results/',
+
+  /* Run your local dev server before starting the tests */
+  // webServer: {
+  //   command: 'npm run start',
+  //   port: 3000,
+  // },
+};
+
+module.exports = config;

test-mineflayer/playwright.config.js

@@ -1,9 +1,11 @@
 const mineflayer = require('mineflayer');
+const { spawn } = require('node:child_process');
 
 const expect = require('chai').expect
 
 describe("Storeys plugin test", () => {
   let bot;
+  let loginURL;
 
   before((done) => {
     bot = mineflayer.createBot({
@@ -15,27 +17,35 @@ describe("Storeys plugin test", () => {
 
   after(() => bot.end());
 
-  it("should connect to minecraft server and execute /make", (done) => {
+  it("1 should connect to minecraft server and execute /make", (done) => {
     // given
     bot.chat("/make");
 
     // then
     bot.on('messagestr', (msg, _, json) => {
       if (msg !== "Player joined the game") {
+        loginURL = json.extra[0].extra[0].extra[0].extra[0].clickEvent.value;
         expect(msg).to.equal("Click here to open a browser and start MAKE actions");
         done();
       }
     });
   });
 
-  it("should execute /new", (done) => {
+  it("2 should create new command /demo", (done) => {
+    const child = spawn('npm', ['run', 'playwright'], { env: { ...process.env, URL: loginURL } });
+    child.stdout.pipe(process.stdout);
+    child.stderr.pipe(process.stderr);
+    child.on('exit', done);
+  });
+
+  it("3 should execute /demo", (done) => {
     // given
-    bot.chat("/new");
+    bot.chat("/demo");
 
     // then
     bot.on('title', (msg) => {
-      expect(msg).to.equal("{\"text\":\"Hello\"}");
+      expect(msg).to.equal("{\"text\":\"automated test!\"}");
       done();
     });
   });
-});
+});

test-mineflayer/storeys.test.js

@@ -0,0 +1,35 @@
+const { test, expect } = require('@playwright/test');
+
+test("test blockly by creating command", async ({ page }) => {
+  const { URL } = process.env;
+
+  await page.goto(URL);
+
+  await page.getByText("Events").click({ force: true });
+  const whenEvent = page.getByText("When /");
+  await whenEvent.click();
+
+  await page.getByText("Actions").click({ force: true });
+  const title = page.getByText("title").first();
+  await title.click();
+
+  await page.locator("text:has-text('abc') >> nth=0").click({ force: true });
+  await page.keyboard.type("automated test!");
+
+  await title.dragTo(whenEvent, {
+    force: true,
+    targetPosition: {
+      x: 20,
+      y: 20,
+    },
+  });
+
+  const code = page.locator("textarea");
+  await expect(code).toHaveText(
+    `e.whenCommand("demo", function(m) {
+    m.title('automated test!');
+  
+  });`,
+    { timeout: 1000 }
+  );
+});