Playwright support with basic test

.dockerignore

@@ -5,3 +5,5 @@
 !perma_web/package.json
 !perma_web/npm-shrinkwrap.json
 !services/warcprox/perma-warcprox-ca.pem
+!playwright/Pipfile
+!playwright/Pipfile.lock

docker-compose.yml

@@ -90,6 +90,26 @@ services:
     networks:
       - default
 
+    #
+  # Perma Functional Tests
+  #
+  playwright:
+    build:
+      context: .
+      dockerfile: ./playwright/Dockerfile
+    image: perma-playwright:0.00314
+    volumes:
+      - ./playwright:/playwright:delegated
+    environment:
+      - START_XVFB=false
+    command: bash
+    tty: true
+    links:
+      - "web:perma.test"
+      - "nginx:perma-archives.test"
+    networks:
+      - default
+      - webrecorder
 
   #
   # Perma Payments

playwright/Dockerfile

@@ -0,0 +1,23 @@
+FROM mcr.microsoft.com/playwright:v1.18.1-focal-amd64
+
+ARG DEBIAN_FRONTEND=noninteractive
+ARG TZ=America/Los_Angeles
+
+RUN apt-get update \
+    && apt-get install -y python3.8 python3-pip \
+    && update-alternatives --install /usr/bin/pip pip /usr/bin/pip3 1 \
+    && update-alternatives --install /usr/bin/python python /usr/bin/python3 1 \
+    && update-alternatives --install /usr/bin/python3 python3 /usr/bin/python3.8 1 \
+
+    && apt-get install -y python3-dev \
+    && apt-get install -y virtualenv
+
+# Setup pseudo-home
+RUN mkdir -p /playwright
+WORKDIR /playwright
+
+COPY playwright/Pipfile /playwright/Pipfile
+COPY playwright/Pipfile.lock /playwright/Pipfile.lock
+RUN pip3 install -U pip \
+    && pip install pipenv \
+    && pipenv --python 3.8 install --ignore-pipfile

playwright/Pipfile

@@ -0,0 +1,20 @@
+[[source]]
+verify_ssl = true
+url = "https://pypi.org/simple"
+name = "pypi"
+
+[packages]
+# general
+"Fabric3" = "*"                             # task automation
+tqdm = "*"                                  # progress bar in dev fab tasks
+requests = "*"
+pyquery = "*"
+pytest = "*" 
+playwright = ">=1.18"
+pytest-playwright = "*"
+
+[requires]
+python_version = "3.8"
+
+[pipenv]
+allow_prereleases = true

playwright/fabfile.py

@@ -0,0 +1,58 @@
+import asyncio
+from playwright.async_api import async_playwright
+
+
+from fabric.decorators import task
+
+@task
+def screenshots(base_url='http://perma.test:8000', output_path='/playwright/screenshots', browser='chrome'):
+    async def screenshot(page, upper_left_selector, lower_right_selector, file_name, upper_left_offset=(0,0), lower_right_offset=(0,0)):
+        print(f"Capturing {file_name}")
+        upper_left_locator = page.locator(upper_left_selector)
+        lower_right_locator = page.locator(lower_right_selector)
+        upper_left_box = await upper_left_locator.bounding_box()
+        lower_right_box = await lower_right_locator.bounding_box()
+        x = upper_left_box['x'] + upper_left_offset[0]
+        y = upper_left_box['y'] + upper_left_offset[1]
+        width = lower_right_box['x'] + lower_right_box['width'] + lower_right_offset[0] - x
+        height = lower_right_box['y'] + lower_right_box['height'] + lower_right_offset[1] - y
+        await page.screenshot(path=file_name, clip={"x": x, "y": y, "width": width,"height": height })
+
+
+    async def do_snaps(browser_instance, url, save_path):
+        page = await browser_instance.new_page()
+        await page.goto(url)
+        await page.set_viewport_size({"width":1300, "height":800})
+
+        await screenshot(page, 'header', '#landing-introduction', save_path + 'screenshot_home.png')
+
+        # login screen
+        await page.goto(url + '/login')
+        await screenshot(page, 'header', '#main-content', save_path + 'screenshot_create_account.png')
+
+        # logged in user - drop-down menu
+        username = page.locator('#id_username')
+        await username.focus()
+        await username.type('[email protected]')
+        password = page.locator('#id_password')
+        await password.focus()
+        await password.type('pass')
+        await page.locator("button.btn.login").click()
+        await page.locator("a.navbar-link").click()
+        await screenshot(page, 'header', 'ul.dropdown-menu', save_path + 'screenshot_dropdown.png', lower_right_offset=(15,15))
+
+        await browser_instance.close()
+
+    async def run():
+        async with async_playwright() as p:
+            browser_instance = None
+            if browser=='firefox':
+                browser_instance = p.firefox
+            elif browser == 'webkit':
+                browser_instance = p.webkit
+            else:
+                browser_instance = p.chromium
+            browser_l = await browser_instance.launch()
+            await do_snaps(browser_l, base_url, output_path + '/')
+
+    asyncio.run(run())

playwright/pyproject.toml

@@ -0,0 +1,5 @@
+# pyproject.toml
+[tool.pytest.ini_options]
+filterwarnings = [
+    'ignore::DeprecationWarning',
+]

playwright/setup.py

@@ -0,0 +1,3 @@
+from setuptools import setup, find_packages
+
+setup(name="PACKAGENAME", packages=find_packages())

playwright/tests/test_functional.py

@@ -0,0 +1,33 @@
+import re
+from settings import urls, logins
+
+two_minutes = 120*1000
+
+def test_homepage(page):
+    page.goto(urls['local']['homepage'])
+    assert page.title() == "Perma.cc"
+    page.locator('body')
+
+
+def login(page, user):
+    page.goto(urls['local']['login'])
+    username = page.locator('#id_username')
+    username.focus()
+    username.type(user['username'])
+    password = page.locator('#id_password')
+    password.focus()
+    password.type(user['password'])
+    page.locator("button.btn.login").click()
+
+def test_example_dot_com(page):
+    login(page, logins['test_user'])
+    url_field = page.locator('#rawUrl')
+    url_field.focus()
+    url_field.type("https://example.com/")
+    page.locator('#addlink').click()
+    page.wait_for_url(re.compile('/[A-Za-z0-9]{4}-[A-Za-z0-9]{4}$'), timeout=two_minutes)
+    frame = page.frame('https://example.com/')
+    assert page.title() == 'Perma | Example Domain'
+    assert "Example Domain" in frame.locator('h1').text_content()
+
+

services/docker/webrecorder/nginx/nginx.conf

@@ -53,7 +53,8 @@ http {
     # Content Server
     server {
         listen 81;
-
+        listen 8092;
+
         # no access to api via content host!
         location ~ ^/(api|([^/]+/[^/]+/\$download$)|_upload|_client_ws) {
             return 403;
@@ -63,7 +64,7 @@ http {
 
         include webrec.conf;
     }
-
+    
     # API Server
     server {
         listen 80;