Add freshbooks example

Author: kblok

.gitignore

@@ -73,11 +73,7 @@ web_modules/
 .yarn-integrity
 
 # dotenv environment variable files
-.env
-.env.development.local
-.env.test.local
-.env.production.local
-.env.local
+.env*
 
 # parcel-bundler cache (https://parceljs.org/)
 .cache
@@ -134,3 +130,4 @@ dist
 /playwright-report/
 /blob-report/
 /playwright/.cache/
+downloads

package-lock.json

@@ -9,7 +9,7 @@
   "license": "ISC",
   "devDependencies": {
     "@mablhq/playwright-reporter": "0.2.1",
-    "@mablhq/playwright-tools": "2.51.37",
+    "@mablhq/playwright-tools": "2.51.42",
     "@playwright/test": "1.50.0",
     "@types/node": "22.12.0",
     "dotenv": "16.4.7"

package.json

@@ -7,7 +7,8 @@ dotenv.config({ path: path.resolve(__dirname, '.env') });
  * See https://playwright.dev/docs/test-configuration.
  */
 export default defineConfig({
-  testDir: './tests',
+  timeout: 120_000,
+  testDir: "./tests",
   /* Run tests in files in parallel */
   fullyParallel: true,
   /* Fail the build on CI if you accidentally left test.only in the source code. */
@@ -17,31 +18,49 @@ export default defineConfig({
   /* Opt out of parallel tests on CI. */
   workers: process.env.CI ? 1 : undefined,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
-  reporter: 'html',
+  reporter: [
+    ["html"],
+    ["list", { printSteps: true }],
+    [
+      "@mablhq/playwright-reporter",
+      {
+        apiKey: process.env.MABL_API_KEY,
+        workspaceId: process.env.MABL_WORKSPACE_ID,
+        planName: "Playwright Tests",
+      },
+    ],
+  ],
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
     /* Base URL to use in actions like `await page.goto('/')`. */
     // baseURL: 'http://127.0.0.1:3000',
 
-    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
-    trace: 'on-first-retry',
+    trace: "on",
+    screenshot: "on",
   },
 
   /* Configure projects for major browsers */
   projects: [
     {
-      name: 'chromium',
-      use: { ...devices['Desktop Chrome'] },
+      name: "FreshBooks chromium",
+      use: {
+        baseURL: "https://my.freshbooks.com",
+        ...devices["Desktop Chrome"],
+      },
+    },
+    {
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] },
     },
 
     {
-      name: 'firefox',
-      use: { ...devices['Desktop Firefox'] },
+      name: "firefox",
+      use: { ...devices["Desktop Firefox"] },
     },
 
     {
-      name: 'webkit',
-      use: { ...devices['Desktop Safari'] },
+      name: "webkit",
+      use: { ...devices["Desktop Safari"] },
     },
 
     /* Test against mobile viewports. */

playwright.config.ts

@@ -0,0 +1,85 @@
+import { BrowserContext, Page } from '@playwright/test';
+import {test, expect} from '../fixtures';
+import { MablFixtures, MablToolset } from '@mablhq/playwright-tools';
+
+test.describe.configure({ mode: 'serial' });
+
+test('Create an invoice', async ({context, page, mabl}) => {
+  await login(context, page, mabl);
+  await page.getByLabel('Invoices').click();
+  await page.getByRole('link', { name: 'New Invoice', exact: true }).click();
+
+  await page.getByLabel('Invoices', {exact: true}).click();
+  await page.getByRole('link', { name: 'New Invoice', exact: true }).click();
+  const invoiceNumber = await page.getByPlaceholder('Enter an Invoice #').inputValue();
+
+  await page.getByPlaceholder('Select a Client').click();
+  await page.locator('[data-option-index="0"]').click();
+  await page.getByText('$').first().click();
+  
+  await page.locator('.invoice-addLineItem').click();
+  await page.getByText('Item 1').click();
+  await expect(page.getByText('$').first()).toHaveText('$750.00');
+
+  
+  await page.getByLabel('Save').click();
+
+  // See details
+  await page.locator(`[data-invoicenumber="${invoiceNumber}"]`).click();
+
+  await expect(page.getByRole('heading', { name: `Invoice ${invoiceNumber}`, exact: true })).toBeVisible();
+
+  // TODO: How we test PDF?
+  await page.getByLabel('More Actions').click();
+
+  const downloadPromise = page.waitForEvent('download');
+
+  await page.locator('.js-download-pdf-invoice-more-actions').click();
+
+  const download = await downloadPromise;
+  await download.saveAs(`./downloads/${invoiceNumber}.pdf`);
+
+  // create a Page for the downloaded PDF to open in
+  const pageForPdf = await context.newPage();
+
+  // use the mabl tools to open the file in a new Page 
+  await mabl.openPdfFile(`./downloads/${invoiceNumber}.pdf`, pageForPdf);
+
+  const aiResult = await mabl.evaluateGenAiAssertion(
+    pageForPdf, 
+    `
+    This is an invoice for $750.00
+    The invoice is in English.
+    The invoice has no images at all.
+    `);
+
+  expect(aiResult.success).toBeTruthy();
+});
+
+async function login(context: BrowserContext, page: Page, mabl: MablToolset) {
+  // Print friendly current time
+  console.log(`Running test at ${new Date().toISOString()}`);
+  const credential = await mabl.getCredentials(process.env.MABL_CREDENTIALS_ID!);
+  const emailPage = await context.newPage();
+
+  const mablEmailPromise = mabl.waitForEmail(credential.username, emailPage, {
+    lookbackTimeMs: 1,
+  });
+
+  await page.goto("/");
+  await page.getByLabel("Email").fill(credential.username);
+  await page.getByLabel("Password").fill(credential.password);
+
+  await page.getByRole("button", { name: "Log In" }).click();
+
+  const mablEmail = await mablEmailPromise;
+  await mablEmail.open();
+
+  const code = (await mablEmail
+    .getBodyLocator()
+    .locator(".two-factor-auth-code-container")
+    .textContent())!;
+  await page.getByLabel("Verification code digit 1").pressSequentially(code);
+  await emailPage.close();
+}
+

tests/mabl-demos/utils/fixtures.ts renamed to tests/fixtures.ts

@@ -1,5 +1,5 @@
-import {expect, test} from './utils/fixtures';
-import {SandboxPage} from './utils/SandboxPage';
+import {expect, test} from '../fixtures';
+import {SandboxPage} from './pom/SandboxPage';
 
 const MFA_CREDENTIALS_ID = process.env.MABL_CREDENTIALS_ID!;
 

tests/freshbooks/freeshbooks.spec.ts

@@ -1,4 +1,4 @@
-import {expect, test} from './utils/fixtures';
+import { expect, test } from "../fixtures";
 
 const MABL_DATABASE_CONNECTION = process.env.MABL_DATABASE_ID!;
 

tests/mabl-demos/credentials.spec.ts

@@ -1,5 +1,5 @@
-import {SandboxPage} from './utils/SandboxPage';
-import {expect, test} from './utils/fixtures';
+import {SandboxPage} from './pom/SandboxPage';
+import { expect, test } from "../fixtures";
 
 test('Validate emails can be received using mabl sandbox app', async ({
   page,

tests/mabl-demos/database.spec.ts

@@ -1,4 +1,4 @@
-import {expect, test} from './utils/fixtures';
+import { expect, test } from "../fixtures";
 
 test('Evaluate a GenAI assertion to validate the state of a page', async ({
   page,