Skip to main content

Deploy a Playwright App on Leapcell

You can deploy a Playwright service on Leapcell to generate screenshots, PDFs, crawl Single Page Apps, or automate testing of your frontend code.

1. Fork the Playwright Boilerplate on GitHub​

Here’s a simple Playwright script to generate a screenshot of a webpage, using an Express server to control the operation:

const express = require("express");
const multer = require("multer");
const { chromium } = require("playwright");

const app = express();
const upload = multer(); // Middleware for parsing form data

// Serve HTML form
app.get("/", (req, res) => {
  res.send(`
    <!DOCTYPE html>
    <html>
    <head><title>Website Screenshot</title></head>
    <body>
        <h1>Generate a Screenshot</h1>
        <form action="/screenshot" method="post" enctype="multipart/form-data">
            <input type="text" name="url" placeholder="https://example.com" required>
            <button type="submit">Generate Screenshot</button>
        </form>
    </body>
    </html>
  `);
});

// Handle screenshot generation
app.post("/screenshot", upload.none(), async (req, res) => {
  const url = req.body.url;
  if (!/^https?:\/\/.+$/.test(url)) return res.status(400).send("Invalid URL.");

  try {
    const browser = await chromium.launch({ args: ["--single-process"] }); // Use single-process mode to avoid sandbox issues
    const page = await browser.newPage();
    await page.goto(url, { timeout: 60000 });
    const screenshotBuffer = await page.screenshot({ type: "png" });
    await browser.close();

    // Embed screenshot as base64 in HTML
    res.send(`
      <!DOCTYPE html>
      <html>
      <head><title>Screenshot Result</title></head>
      <body>
          <h1>Screenshot of ${url}</h1>
          <img src="data:image/png;base64,${screenshotBuffer.toString("base64")}" style="max-width:100%;height:auto;">
          <br><a href="/">Back to form</a>
      </body>
      </html>
    `);
  } catch (error) {
    console.error("Screenshot error:", error);
    res.status(500).send("Failed to generate screenshot.");
  }
});

// Start server
const PORT = process.env.PORT || 8080;
app.listen(PORT, () => console.log(`Server running on http://localhost:${PORT}`));

2. Create a Service in the Leapcell Dashboard and Connect Your Repo​

Go to the Leapcell Dashboard and click the New Service button.

Next, click Connect with GitHub and select your forked repository.

3. Fill in the Following Values During Service Creation​

info

Since Playwright requires browser engines like Chromium, WebKit, and Firefox, you need to install dependencies. It’s recommended to run the installation command separately.

Here’s the final installation command:

npm install -D @playwright/test@latest && npx playwright install --with-deps && npm install

For this example, we use an Express app to control Playwright operations. The start command is node index.js.

FieldValue
RuntimeNode.js (Any version)
Build Commandnpm install -D @playwright/test@latest && npx playwright install --with-deps && npm install
Start Commandnode index.js
Port8080

4. Access Your App​

Once deployed, you’ll see a URL like foo-bar.leapcell.dev on the Deployment page. Visit the domain to test your application.

Continuous Deployments​

Every push to the linked branch automatically triggers a build and deploy. Failed builds are safely canceled, and the current version remains live until the next successful deployment.

Learn more about Continuous Deployments.