Content Update

Regarding the Playwright topic that was introduced on the blog, the latest version can be deployed on Vercel. Please refer to the following page.

• Deploying Playwright

Change the behavior of Playwright containers

The sample of a working container for Playwright that had already been implemented was created to display an image when a URL is passed as a parameter. This time, in order to make it easier to use in collaboration, the return value is in Json format, and the image data is output in base64.

The change in this section is very simple; simply rewrite the relevant code as follows

  const screenshot = await page.screenshot();

  // Base64エンコードされたスクリーンショットをHTTPレスポンスとして送信
  const base64Screenshot = screenshot.toString("base64");
  res.json({ screenshot: base64Screenshot });

Actual access returns Json data as follows.

Obtain an image

The code will be rewritten to display the data acquired in Base64 as an image using the above API.

This time, we will use axios to implement asynchronous processing. Please install as follows

npm install axios

Then add a definition that uses this in the first area.

const axios = require("axios");

The URL should be the URL of the web app running the container that you have already deployed, or the URL of the container if you are running it locally.

  try {
    const externalApiUrl =
      "https://yourplaywright.domain/api/screenshot?url=" +
      url;
    const response = await axios.get(externalApiUrl);
    const imageData = response.data.screenshot;

    const decodedImageData = Buffer.from(imageData, "base64");

    res.setHeader("Content-Type", "image/png");
    res.status(200).end(decodedImageData, "binary");
  } catch (error) {
    return res.status(500).json({ error: "Can't get content data" });
  }

Now you can convert the URL to me to your application and the value returned in Base64 to an image for display. The result will look like this

Define servers as environment variables

In the above sample code, the server URL is embedded. Define this as an environment variable. First, add the following items in .env.

NEXT_PUBLIC_PLAYWRIGHT=https://yourplaywright.domain

Then add the following line to the appropriate code to obtain the above values.

  const NEXT_PUBLIC_PLAYWRIGHT = process.env.NEXT_PUBLIC_PLAYWRIGHT;

Finally, rewrite the line containing the URL as follows

    const externalApiUrl = NEXT_PUBLIC_PLAYWRIGHT + "/api/screenshot?url=" + url;

After completing the above settings, check to see if the system is working without problems.

Summary

In this article, we introduced how to obtain screenshots from the Next.js API using the Playwright API. In this case, the data returned by the container was an image, but this time we have changed the data to be exchanged as Base64 data. In addition, we have added an environment variable that allows you to change the URL of the server in case the server is often changed.

Since the current implementation is to retrieve an image each time, we will add code to store the image in Azure Blob Storage and use the image if it is available.

Tags

• Next.js
• Related Technology