mabl-playwright-integrations

This repository provides examples, tools, and utilities for integrating Mabl and Playwright.

Project setup

To install the @mablhq/playwright-tools package, you will need:

• Playwright 1.43.1 or greater
• Your mabl workspace ID
• A mabl API key of type "Command Line Interface"
• Credential ID - create mabl credentials and get the ID
• Database ID - create a database connection and get the ID

Note: This example project assumes that the database has a pets table.

Create .env file

The best way to use this demo project is to create a .env file in the root of the project with the following content:

MABL_API_KEY=your_api_key
MABL_WORKSPACE_ID=your_workspace_id
DATABASE_ID=your_database_id
MABL_CREDENTIALS_ID=your_credentials_id

Usage

Email testing

Create a temporary email address, send a test email, and open it to verify that the email is received with the correct details:

mabl-playwright-integrations/tests/mabl-demos/email.spec.ts

Lines 8 to 22 in 10ad925

	await page.goto('https://sandbox.mabl.com');
	const sandbox = new SandboxPage(page);
	await sandbox.maybeWaitForReady();
	const mailboxPage = await sandbox.goToMailboxPage();
	const emailAddress = await mabl.createMailBoxAddress();
	console.log(`Email address: ${emailAddress}`);
	const subject = 'Test email';
	const body = 'This is a test email';
	await mailboxPage.fillOutAndSendEmail(emailAddress, subject, body);
	const mablEmail = await mabl.waitForEmail(emailAddress, page, {subject});
	await mablEmail.open();
	expect(await mablEmail.getToAddress()).toBe(emailAddress);
	expect(await mablEmail.getSubject()).toBe(subject);
	expect(await mablEmail.getBodyText()).toBe(body);
	expect(await mablEmail.getFromAddress()).toBe('test_mailer@m.mablmail.com');

GenAI testing

Evaluate the state of the page https://www.mabl.com with a GenAI Assertion:

mabl-playwright-integrations/tests/mabl-demos/genAi.spec.ts

Lines 7 to 14 in 10ad925

	await page.goto('https://www.mabl.com');
	const prompt =
	'Please validate that the web page you are looking at is a marketing page for a company named mabl which does automated UI testing';
	const result = await mabl.evaluateGenAiAssertion(page, prompt);
	console.log('GEN AI EXPLANATION');
	console.log(result.explanation);
	expect(result.success).toBe(true);

Database testing

Run a database query step to retrieve 15 rows from a "pets" table column using a connection from your mabl workspace:

mabl-playwright-integrations/tests/mabl-demos/database.spec.ts

Lines 8 to 12 in 10ad925

	const dbQuery = 'SELECT * from pets LIMIT 15';
	const result = await mabl.executeQuery(MABL_DATABASE_CONNECTION, dbQuery, []);
	expect(result.metadata?.status).toBe('success');
	expect(result.columns?.length).toEqual(5);
	expect(result.rows?.length).toEqual(15);

PDF testing

Download and validate the contents of a PDF from the mabl sandbox

mabl-playwright-integrations/tests/mabl-demos/pdf.spec.ts

Lines 15 to 31 in 10ad925

	const downloadPromise = page.waitForEvent('download');
	// click to download PDF
	await pdfPage.downloadPdf.click();
	// wait for download to complete
	const download = await downloadPromise;
	const pdfPath = await download.path();
	// use the mabl tools to open the file in a new Page
	const pageForPdf = await browser.newPage();
	await mabl.openPdfFile(pdfPath, pageForPdf);
	const element = pageForPdf.locator('text=Journey run export');
	expect(await element.isVisible()).toBeTruthy();

MFA testing

Log in with mabl MFA credentials

mabl-playwright-integrations/tests/mabl-demos/credentials.spec.ts

Lines 11 to 13 in 10ad925

	const mfaToken = await mabl.getMfaCode(MFA_CREDENTIALS_ID);
	expect(mfaToken).toBeTruthy();
	expect(mfaToken.length).toBe(6);