Integrate Playwright with PerfectoSmart Reporting

To integrate Playwright with PerfectoSmart Reporting, choose the section that matches your testing scenario (desktop web or Android) and then follow the steps for your preferred programming language.

For information on supported operating systems and browsers as well as prerequisites, see Playwright.

This document includes references to a third-party product, Playwright. The user interface and usage of third-party products are subject to change without notice. For the latest published information about Playwright, see the Playwright documentation.

Setup steps for desktop web

Perform the following steps to add Perfecto Smart Reporting to your Playwright tests for desktop web, placing the code snippets at appropriate points in your test flow. You can implement reporting in Java, JavaScript, or TypeScript. Follow the instructions for your preferred language.

Click a language to expand the steps.

  1. Add the testStart code at the beginning of your test script, right after initializing the Playwright and browser context. This marks the start of the test.

    Copy 
    //test start
    Map<String, Object> paramsTestStart = new HashMap<>();
    paramsTestStart.put("name", "name");
    //tags
    paramsTestStart.put("tags", List.of("tag1", "tag2"));         
    //job
    paramsTestStart.put("jobName","My Job");
    paramsTestStart.put("jobNumber",45);         
    //project
    paramsTestStart.put("projectName","project name");
    paramsTestStart.put("projectVersion","1.0");

    page.evaluate("perfecto:report:testStart", new Gson().toJson(paramsTestStart));

  2. Place the stepStart and stepEnd code around the specific steps you want to report. This marks the beginning and end of each step within your test.

    Copy 
    //step start
    Map<String, Object> paramsStepStart = new HashMap<>();
    paramsStepStart.put("name", "PWstep");

    page.evaluate("perfecto:report:stepStart", new Gson().toJson(paramsStepStart));


    //step end
    Map<String, Object> paramsStepEnd = new HashMap<>();
    paramsStepEnd.put("message", "PW step end");
    page.evaluate("perfecto:report:stepEnd", new Gson().toJson(paramsStepEnd));

  3. Add the testEnd code at the end of your test script, after all test steps are completed. This marks the end of the test and also allows you to specify:

    • Whether the test run was successful or failed.

      In the following example, the success parameter is set to false, indicating that the test failed.

    • If the test run failed, a failure message to pass to the Perfecto report.

      You can use the failureDescription parameter to provide a detailed message explaining the reason for the failure.

    Copy 
    //test stop
    Map<String, Object> paramsTestStop = new HashMap<>();
    paramsTestStop.put("success", false);
    paramsTestStop.put("failureDescription", "My failure message");
                        
    page.evaluate("perfecto:report:testEnd", new Gson().toJson(paramsTestStop));

  1. Add the testStart code at the beginning of your test script, right after initializing the Playwright and browser context. This marks the start of the test.

    Copy 
    //test start
        const paramsTestStart = {
          tags: ["tag1", "tag2"],
          name: "PWtestStart3",
          jobName: "My Job",
          jobNumber : "1",
          projectName:"project name",
          projectVersion: "1.0"
        };

        await page.evaluate("perfecto:report:testStart",JSON.stringify(paramsTestStart))

  2. Place the stepStart and stepEnd code around the specific steps you want to report. This marks the beginning and end of each step within your test.

    Copy 
        //step start
        const paramsStepStart = {
          name: "step name"
        };

        await page.evaluate("perfecto:report:stepStart",JSON.stringify(paramsStepStart))

        //step end
        const paramsStepEnd = {
          message: "step end"
        };

        await page.evaluate("perfecto:report:stepEnd",JSON.stringify(paramsStepEnd))

  3. Add the testEnd code at the end of your test script, after all test steps are completed. This marks the end of the test and also allows you to specify:

    • Whether the test run was successful or failed.

      In the following example, the success parameter is set to false, indicating that the test failed.

    • If the test run failed, a failure message to pass to the Perfecto report.

      You can use the failureDescription parameter to provide a detailed message explaining the reason for the failure.

    Copy 
        //test end
        const paramsTestEnd = {
          success: false,
          failureDescription: "My failure message"
        };

        await page.evaluate("perfecto:report:testEnd",JSON.stringify(paramsTestEnd))

  1. Add the paramsTestStart code at the beginning of your test script, right after initializing the Playwright and browser context. This marks the start of the test.

    Copy 
    const paramsTestStart = {
      tags: ['Playwright', 'standalone'],
      name: 'Perfecto Playwright Test',
      jobName: 'My Job',
      jobNumber: '1',
      projectName: 'My Project',
      projectVersion: '1.0'
    };

    await page.evaluate('perfecto:report:testStart', JSON.stringify(paramsTestStart));

  2. Optionally, wrap specific steps with paramsStepStart and paramsStepEnd to mark them in the report.

    Copy 
    // Step start
    const paramsStepStart = { name: 'Navigate to Perfecto' };
    await page.evaluate('perfecto:report:stepStart', JSON.stringify(paramsStepStart));

    // ... your test step here ...

    // Step end
    const paramsStepEnd = { message: 'Navigation complete' };
    await page.evaluate('perfecto:report:stepEnd', JSON.stringify(paramsStepEnd));

  3. Add the paramsTestEnd code at the end of your test script, after all test steps are completed. This marks the end of the test and allows you to specify whether it passed or failed.

    Copy 
    const paramsTestEnd = {
      success: true // or false
    };

    await page.evaluate('perfecto:report:testEnd', JSON.stringify(paramsTestEnd));

    If the test fails, you can include a failure message:

    Copy 
    const paramsTestEnd = {
      success: false,
      failureDescription: 'Expected link not found'
    };

    await page.evaluate('perfecto:report:testEnd', JSON.stringify(paramsTestEnd));

Setup steps for Android

Perform the following steps to add Perfecto Smart Reporting to your Playwright tests for Android, placing the code snippets at appropriate points in your test flow. You can implement reporting in JavaScript or TypeScript. Follow the instructions for your preferred language.

Click a language to expand the steps.

  1. Add the testStart code at the beginning of your test script, right after initializing the Playwright and browser context. This marks the start of the test.

    Copy 
    // test start
    const paramsTestStart = {
      tags: ["tag1", "tag2"],
      name: "AndroidPWTestStart",
      jobName: "My Job",
      jobNumber: "1",
      projectName: "project name",
      projectVersion: "1.0"
    };

    await page.evaluate("perfecto:report:testStart", JSON.stringify(paramsTestStart));

  2. Place the stepStart and stepEnd code around the specific steps you want to report. This marks the beginning and end of each step within your test.

    Copy 
    // step start
    const paramsStepStart = {
      name: "Navigate to Google"
    };

    await page.evaluate("perfecto:report:stepStart", JSON.stringify(paramsStepStart));

    // Your test step
    await page.goto("https://www.google.com/");

    // step end
    const paramsStepEnd = {
      message: "Navigation complete"
    };

    await page.evaluate("perfecto:report:stepEnd", JSON.stringify(paramsStepEnd));

  3. Add the testEnd code at the end of your test script, after all test steps are completed. This marks the end of the test and also allows you to specify:

    • Whether the test run was successful or failed.

      In the following example, the success parameter is set to false, indicating that the test failed.

    • If the test run failed, a failure message to pass to the Perfecto report.

      You can use the failureDescription parameter to provide a detailed message explaining the reason for the failure.

    Copy 
    // test end
    const paramsTestEnd = {
      success: false,
      failureDescription: "My failure message"
    };

    await page.evaluate("perfecto:report:testEnd", JSON.stringify(paramsTestEnd));

  1. Add the paramsTestStart code at the beginning of your test script, right after initializing the Playwright and browser context. This marks the start of the test.

    Copy 
    const paramsTestStart = {
      tags: ['Android', 'Playwright'],
      name: 'Perfecto Android Test',
      jobName: 'My Job',
      jobNumber: '1',
      projectName: 'My Project',
      projectVersion: '1.0'
    };

    await page.evaluate('perfecto:report:testStart', JSON.stringify(paramsTestStart));

  2. Optionally, wrap specific steps with paramsStepStart and paramsStepEnd to mark them in the report.

    Copy 
    // Step start
    const paramsStepStart = { name: 'Launch Android app' };
    await page.evaluate('perfecto:report:stepStart', JSON.stringify(paramsStepStart));

    // ... your test step here (e.g., navigate or tap) ...

    // Step end
    const paramsStepEnd = { message: 'App launched successfully' };
    await page.evaluate('perfecto:report:stepEnd', JSON.stringify(paramsStepEnd));

  3. Add the paramsTestEnd code at the end of your test script, after all test steps are completed. This marks the end of the test and allows you to specify whether it passed or failed.

    Copy 
    const paramsTestEnd = {
      success: true // or false
    };

    await page.evaluate('perfecto:report:testEnd', JSON.stringify(paramsTestEnd));

    If the test fails, you can include a failure message:

    Copy 
    const paramsTestEnd = {
      success: false,
      failureDescription: 'Expected element not found'
    };

    await page.evaluate('perfecto:report:testEnd', JSON.stringify(paramsTestEnd));

What's next

View Playwright-based execution reports