Merge pull request #16 from rstudio/refactor/playwright

Author: wch

.github/workflows/build.yml

@@ -31,15 +31,34 @@ jobs:
         run: |
           make submodules
 
-      # =====================================================
-      # Build
-      # =====================================================
-      # - uses: quarto-dev/quarto-actions/setup@v2
-
       - name: Build shinylive
         run: |
           make all
 
+      # =====================================================
+      # Run playwright tests
+      # =====================================================
+      - uses: actions/setup-node@v2
+        with:
+          node-version: "14.x"
+      - name: Install dependencies
+        run: yarn
+      - name: Install Shinylive Python pacakge
+        run: pip install shinylive
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
+      - name: Run Playwright tests
+        run: yarn playwright test
+      - uses: actions/upload-artifact@v2
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30
+
+      # =====================================================
+      # Upload site/ artifact
+      # =====================================================
       - name: Upload site/ artifact
         if: github.ref == 'refs/heads/main'
         uses: actions/upload-pages-artifact@v1
@@ -69,7 +88,6 @@ jobs:
       # =====================================================
       # Upload shinylive bundle on release
       # =====================================================
-
       # Ensure that if the version in package.json is "0.0.5", then release tag
       # is "v0.0.5".
       - name: Check that version number matches release tag
@@ -96,6 +114,9 @@ jobs:
           overwrite: true
 
 
+  # =====================================================
+  # Deploy GitHub Pages site
+  # =====================================================
   deploy_gh_pages:
     if: github.ref == 'refs/heads/main'
     needs: build

.gitignore

@@ -6,6 +6,14 @@
 __pycache__
 /typings/
 
+/test-results/
+/playwright-report/
+/playwright/.cache/
+
+.vscode/*.log
+
+playwright/static-build/
+
 .pnp.*
 .yarn/*
 !.yarn/patches

package.json

@@ -8,6 +8,11 @@
     "url": "https://github.com/rstudio/shinylive",
     "type": "git"
   },
+  "scripts": {
+    "serve": "tsx scripts/build.ts --serve",
+    "test-server": "tsx scripts/build.ts --test-server",
+    "cypress:open": "cypress open"
+  },
   "author": "Winston Chang <winston@rstudio.com>",
   "license": "MIT",
   "devDependencies": {
@@ -25,6 +30,7 @@
     "@codemirror/view": "^6.0.0",
     "@github/clipboard-copy-element": "^1.1.2",
     "@lezer/common": "^1.0.0",
+    "@playwright/test": "^1.25.0",
     "@testing-library/dom": "^8.13.0",
     "@testing-library/react": "^13.2.0",
     "@testing-library/user-event": "^14.2.0",

playwright.config.ts

@@ -0,0 +1,86 @@
+import type { PlaywrightTestConfig } from "@playwright/test";
+import { devices } from "@playwright/test";
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+const config: PlaywrightTestConfig = {
+  testDir: "./playwright",
+  /* Maximum time one test can run for. */
+  timeout: 50 * 1000,
+  expect: {
+    /**
+     * Maximum time expect() should wait for the condition to be met.
+     * For example in `await expect(locator).toHaveText();`
+     */
+    timeout: 20000,
+  },
+  /* 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 : 1,
+  /* 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: "chromium",
+      use: {
+        ...devices["Desktop Chrome"],
+      },
+    },
+
+    // {
+    //   name: "firefox",
+    //   use: {
+    //     ...devices["Desktop Firefox"],
+    //   },
+    // },
+
+    // {
+    //   name: "webkit",
+    //   use: {
+    //     ...devices["Desktop Safari"],
+    //   },
+    // },
+  ],
+
+  /* Folder for test artifacts such as screenshots, videos, traces, etc. */
+  // outputDir: 'test-results/',
+
+  /* Run your local dev server before starting the tests */
+  webServer: [
+    {
+      command: "yarn test-server",
+      port: 3000,
+    },
+    {
+      command:
+        ". venv/bin/activate && shinylive export playwright/static-app-test playwright/static-build && python3 -u -m http.server --directory playwright/static-build 8008 2> /dev/null",
+      port: 8008,
+    },
+  ],
+};
+
+export default config;

playwright/examples-viewer.spec.ts

@@ -0,0 +1,29 @@
+import { expect_terminal_has_text, wait_until_initialized } from "./helpers";
+import { expect, test } from "@playwright/test";
+
+test("Open examples page and click to a new example", async ({ page }) => {
+  await page.goto("/examples/");
+  // Click text=App with plot
+  await page.locator("text=App with plot").click();
+  await expect(page).toHaveURL("http://localhost:3000/examples/#app-with-plot");
+});
+
+test("Add a new non-app script, type in it, and run code", async ({ page }) => {
+  await page.goto("/examples/");
+
+  // Wait for initialization to complete
+  await wait_until_initialized(page);
+  await page.locator(`[aria-label="Add a file"]`).click();
+  await page.locator('[aria-label="Name current file"]').fill("my_app.py");
+
+  await page.locator(".cm-editor [role=textbox]").type(`print("hello world")`);
+
+  // Running both command enter for mac and control enter for non-macs. Running
+  // both just helps avoid looking at running environment
+  await page.locator(".cm-editor [role=textbox]").press(`Meta+Enter`);
+  await page.locator(".cm-editor [role=textbox]").press(`Control+Enter`);
+
+  // Make sure that hello world exists in the terminal output
+  await expect_terminal_has_text(page, `>>> print("hello world")`);
+  await expect_terminal_has_text(page, "hello world");
+});

playwright/helpers.ts

@@ -0,0 +1,84 @@
+import { Page, expect } from "@playwright/test";
+
+/**
+ * Wait until shinylive terminal shows the three >>>'s indicating that it's
+ * ready to go
+ * @param page Page object available from inside playwright tests
+ */
+export async function wait_until_initialized(page: Page) {
+  await page.waitForSelector(`text=">>>"`, { timeout: 10000 });
+}
+
+/**
+ * Click the run app button in the upper right of the editor
+ * @param page Page object available from inside playwright tests
+ */
+export async function click_run_app_button(page: Page) {
+  // This is a bit of an intense selector for the run button but right now I
+  // can't figure out a better way
+  await page.locator(`[aria-label="Re-run code (Ctrl)-Shift-Enter"]`).click();
+}
+
+async function expect_pane_has_text(
+  page: Page,
+  pane_selector: string,
+  text: string
+) {
+  await expect(page.locator(pane_selector, { hasText: text })).toBeVisible();
+}
+
+/**
+ * Test that some text exists in the editor pane
+ * @param page Page object available from inside playwright tests
+ * @param text Text to search for in the editor panel
+ */
+export async function expect_editor_has_text(page: Page, text: string) {
+  await expect_pane_has_text(page, `.shinylive-editor`, text);
+}
+
+/**
+ * Test that some text exists in the terminal pane
+ * @param page Page object available from inside playwright tests
+ * @param text Text to search for in the terminal panel
+ */
+export async function expect_terminal_has_text(page: Page, text: string) {
+  await expect_pane_has_text(page, `.shinylive-terminal`, text);
+}
+
+/**
+ * Test that some text exists in the app viewer pane
+ * @param page Page object available from inside playwright tests
+ * @param text Text to search for in the terminal panel
+ * @param selector Element to search for text in. Defaults to h1 tag
+ */
+export async function expect_app_has_text(
+  page: Page,
+  text: string,
+  selector: string = "h1"
+) {
+  // For some reason there needs to be an await for the frame locator but not
+  // for the other normal locators
+  await expect(
+    page.frameLocator(".app-frame").locator(selector, { hasText: text })
+  ).toBeVisible();
+}
+
+/**
+ * A URL data-hash containing the following app:
+ *
+ * ```
+ * from shiny import App, render, ui
+ *
+ * app_ui = ui.page_fluid(
+ *     ui.h1("Code from a url")
+ * )
+ *
+ * def server(input, output, session):
+ *     pass
+ *
+ * app = App(app_ui, server)
+ * ```
+ *
+ */
+export const app_url_encoding =
+  "code=NobwRAdghgtgpmAXGKAHVA6VBPMAaMAYwHsIAXOcpMAMwCdiYACAZwAsBLCbJjmVYnTJMAgujxM6lACZw6EgK4cAOhFVpUAfSVMAvEyVYoAcziaaAGyXSAFKqYODHDGwCMdsAGFispvUZMUAZ0FspgAJSqkWoQsjSscgBucjZcqApkEsQZ6ZkJLCwcpOGI9o6oUAVlDuroeqLoNhraHBIsSXLRYAC+ALpAA";

playwright/load-from-url.spec.ts

@@ -0,0 +1,62 @@
+import {
+  app_url_encoding,
+  expect_app_has_text,
+  expect_editor_has_text,
+} from "./helpers";
+import { expect, test } from "@playwright/test";
+
+test.describe("The URL can be used to load data", async () => {
+  test("Editor view", async ({ page }) => {
+    await page.goto(`/editor/#${app_url_encoding}`);
+
+    // Make sure the correct text is in the editor
+    await expect_editor_has_text(page, 'ui.h1("Code from a url")');
+
+    await expect_app_has_text(page, "Code from a url", "h1");
+  });
+
+  test("Examples view", async ({ page }) => {
+    await page.goto(`/examples/#${app_url_encoding}`);
+
+    // Sanity check we're in the examples view.
+    await expect(page.locator("text=/^examples$/i")).toBeVisible();
+
+    // Make sure the correct text is in the editor
+    await expect_editor_has_text(page, 'ui.h1("Code from a url")');
+
+    await expect_app_has_text(page, "Code from a url", "h1");
+  });
+
+  test("App view", async ({ page }) => {
+    await page.goto(`/app/#${app_url_encoding}`);
+
+    await expect_app_has_text(page, "Code from a url", "h1");
+  });
+});
+
+// Looks for the shiny logo
+const header_bar_selector = '.HeaderBar img[alt="Shiny"]';
+
+test.describe("The header bar parameter can turn off the header in app view but not the other views", async () => {
+  test("Editor view can't turn off header bar", async ({ page }) => {
+    await page.goto(`/editor/#h=0&${app_url_encoding}`);
+
+    await expect(page.locator(header_bar_selector)).toBeVisible();
+  });
+  test("Examples view can't turn off header bar", async ({ page }) => {
+    await page.goto(`/examples/#h=0&${app_url_encoding}`);
+
+    await expect(page.locator(header_bar_selector)).toBeVisible();
+  });
+
+  test("App view can turn off header bar", async ({ page }) => {
+    await page.goto(`/app/#h=0&${app_url_encoding}`);
+
+    await expect(page.locator(header_bar_selector)).not.toBeVisible();
+  });
+  test("App view can show header bar", async ({ page }) => {
+    await page.goto(`/editor/#${app_url_encoding}`);
+
+    await expect(page.locator(header_bar_selector)).toBeVisible();
+  });
+});