Using Playwright with the Pluto Notary TEE
Instead of reverse engineering APIs you can instruct the Notary to automate data extraction and proving for you. This process works with both public and authenticated data, including websites that require a user login. This is made possible by Pluto Frame, an embeddable iFrame. Pluto Frame will be available for all platforms via Pluto’s SDKs, including regular websites and iOS/Android apps. Notably, the Pluto Frame requires no browser extensions or downloads.
This process utilizes Playwright scripts which execute within a sandboxed browser, which operates in the Pluto Notary Trusted Execution Environment (TEE).
What follows is a simple example script that can be used in combination with a Manifest to extract the bank balance from our fictional Pluto Pseudo Bank.
Note the addition of the prompt and prove functions, which are Pluto built-in functions that interact with the Pluto Frame and the Pluto Notary TEE.
import { prompt, prove } from "@plutoxyz/playwright-utils";
export async function run(page) {
await page.goto("https://pseudo-bank.pluto.dev");
const username = page.getByRole("textbox", { name: "Username" });
const password = page.getByRole("textbox", { name: "Password" });
let input = await prompt([
{ title: "Username", type: "text" },
{ title: "Password", type: "password" },
]);
await username.fill(input[0]);
await password.fill(input[1]);
const loginBtn = page.getByRole("button", { name: "Login" });
await loginBtn.click();
await expect(page.getByText("Your Accounts")).toBeVisible();
const balanceLocator = page.locator("#balance-2");
await expect(balanceLocator).toBeVisible();
const balanceText = (await balanceLocator.textContent()) || "";
const balance = parseFloat(balanceText.replace(/[$,]/g, ""));
await prove("bank_balance", balance);
}We are currently evaluating the addition of Stagehand to make the creation of extraction scripts even easier.
If you are interested in utilizing this feature, please contact us. We’d be excited to collaborate with you and provide you with early access.
Debugging locally
To debug your Playwright scripts or to get an idea of what the flow looks like, you can run our debugger CLI together with the Playwright Inspector UI locally.
# init a new Playwright workspace
npm init playwright@latest
# download the debugger CLI
# TODO: ping @mattes for access
# add Pluto Playwright utils
# https://www.npmjs.com/package/@plutoxyz/playwright-utils
npm add @plutoxyz/playwright-utils
# update your Playwright script in tests/example.spec.js:
# import { test, expect } from "@playwright/test";
# import { prompt, prove } from "@plutoxyz/playwright-utils";
#
# test("prove bank balance", async ({ page }) => {
# // await page.goto("https://pseudo-bank.pluto.dev");
# // ... your script here
# });
#
# run the debugger CLI (run with `-help` to see all options)
./playwright-debugger
# run the Playwright Inspector UI
npx playwright test --ui