Custom Availability Tests with Playwright, running on Azure Functions

Create custom Availability test with Playwright automation for web site/backend that are instrumented with Application Insights.

Documentation

Playwright

https://playwright.dev/docs/intro Offers web automation - open a page, click or otherwise interact with the page,

Create an Azure Function app with NodeJS

https://docs.microsoft.com/en-us/azure/developer/javascript/tutorial/vscode-function-app-http-trigger/tutorial-vscode-serverless-node-install

Playwright running on Azure Function

https://anthonychu.ca/post/azure-functions-headless-chromium-puppeteer-playwright/

Custom Availability Tests with Azure Functions

https://docs.microsoft.com/en-us/azure/azure-monitor/app/availability-azure-functions

Setup

• For Playwright to run correctly, navigate to the Configuration blade of the Azure Function app in Azure Portal and add PLAYWRIGHT_BROWSERS_PATH setting with value 0 This will make Playwright use its own browser engine.

• Edit .vscode\settings.json file in your Azure Function app and at the root level add "azureFunctions.scmDoBuildDuringDeployment": true This tells VSCode to not install the modules locally and then upload them, but rather upload the app and install the modules on the remote machine.

Skipping either of these two steps can cause Playwright errors when running on Azure.

• Edit local.settings.json and under Values add APPINSIGHTS_INSTRUMENTATIONKEY. For best results, the web page under test and its back end should be instrumented with Application Insights using the same key. If you use a different name for this variable, it should match the name configured in Portal

Usage

Install the npm modules: npm install playwright-chromium npm install pwt-av-azf-demo

Edit index.js for your Function app replace httpReq with a string for non-HTTP functions:

const { chromium } = require("playwright-chromium"); // add playwright

module.exports = async function (azfContext, httpReq) {
    var aiKey = process.env["APPINSIGHTS_INSTRUMENTATIONKEY"]; // find the AppInsights key
    let pwai = require("pwt-av-azf-demo")
        (aiKey, azfContext, httpReq); // if the function is not using HTTP trigger replace httpReq with a string

Open a browser and a page in it. pwai.openNewPage(...) returns a Playwright page with some additional setup performed on it.

    const browser = await chromium.launch();

    const page = await pwai.openNewPage(browser, "<webPageUrlGoesHere>");

Automate your page, refer to Playwright's documentation for details

    await page.click("#myButtonId");

After the automation is done, close the page to emit the telemetry for the page:

    if (myTestIsNotPassing) {
        // the test is successful by default
        pwai.failPageTest(page, "Quantum field twisted the wrong way");
    }
    // page test is done, emit telemetry
    await pwai.finalizeClosePage(page);

After the last page test is done, close the browser and finalize the test to emit the telemetry for the Availability Test:

    await browser.close();
    pwai.finalizeAvailabilityTest("Two Page Test"); // the name of the test as shown in Portal

Run the function locally, it should emit Application Insights telemetry that would be visible in Azure Portal in a few minutes. If the web page under test and its back end are also instrumented with AppInsights, different parts of the telemetry may take different time to reach Azure Portal.

Navigate to the Availability blade under the Application Insights used for the test in Azure Portal.

Drill into one of the results. When the chart is in "Scatter Plot" mode, the items in it are clickable. Each page opened with pwai.openNewPage is represented by a layer (InProc dependency)