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.

info

You’ll need a GitHub account to proceed. If you don’t have one, you can create on the GitHub website.

1. Fork the Playwright Boilerplate on GitHub​

Repo: Playwright Boilerplate

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.

On the "New Service" page, select the repository you just forked.

tip

To access your repositories, you’ll need to connect Leapcell to your GitHub account.

Follow these instructions to connect to GitHub.

Once connected, your repositories will appear in the list.

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

Enter these values in the corresponding fields.

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.