Get trace and video

[Anoerak]

Hi,

I tried without success to get the trace and video but only got the component and even the component is always the same page. I have no idea of what I am doing wrong :(

package.json

"safetest": "cross-env OPT_URL=${OPT_URL:-http://localhost:10088/} react-scripts --inspect test --runInBand --testMatch '**/*.safetest.{j,t}s{,x}' --setupFilesAfterEnv ./setup-safetest.tsx --testTimeout=30000",

"safetest:ci:test": "OPT_URL=http://localhost:10088/ OPT_ARTIFACTS=artifacts.json OPT_DOCKER=1 OPT_CI=1 npm run safetest -- --watchAll=false --json --outputFile=results.json --bail=5 --ci=1",

"safetest:ci": "(npm run safetest:ci:test || true)",

"safetest:regenerate-screenshots": "npm run safetest -- --watchAll=false --docker=1 --update-snapshot",

"process:ci": "npx safetest add-artifact-info artifacts.json results.json && cp results.json ../../../JAWS_Project/jaws/public/js/fleet.json"

test

import { describe, it, expect } from "safetest/jest";
import { chromium } from "playwright";

describe("FleetConfig", () => {
    it("should have a fleet config page", async () => {
        const browser = await chromium.launch();
        const context = await browser.newContext();
        const page = await context.newPage();
        await page.goto("http://localhost:10088/intranet/login/index");
        await page
            .locator('input[name="username"]')
            .fill(process.env.JAWS_USERNAME);
        await page
            .locator('input[name="password"]')
            .fill(process.env.JAWS_PASSWORD);
        await page.locator('input[type="submit"]').click();
        await page.goto("http://localhost:10088/fleet/config/");
        expect(await page.locator("h5").count()).toBe(1);
        expect(await page.locator("h5").innerText()).toBe("Fleet configuration");
        await browser.close();
    });
});

main

import { bootstrap } from "safetest/react";
import { Report } from "safetest/report";

const MyReport = () => {
    return (
        <Report
            getTestUrl={(filename, test) => {
                const relativeFile = `./${filename}`.replace(/\.[jt]sx?$/g, "");
                const testName = test.trim().replace(/ /g, "+");
                return `${process.env.DEPLOYED_URL}?test_path=${relativeFile}&test_name=${testName}`;
            }}
            renderArtifact={(type, path) => {
                if (type === "video")
                    return (
                        <video
                            src={`${process.env.DEPLOYED_URL}${path}`}
                            controls
                        />
                    );
                // etc
            }}
        />
    );
};

[kolodny]

You should be letting SafeTest open the browser since it tracks screenshots and videos internally, that's probably why you're not getting them. You page initialization should look like: const page = await render(/* .... */)

[Anoerak]

I'm not sure it's gonna work since my project is a small react app compile with webpack and running as a component of a bigger project using PHP and JS. So the react app can't render by itself. As I wrote in an separate ticket, I've been working on something else for the past week but I about to jump back into this project since I really want to sort out how to set up safetest.

I'll keep you updated.

Thanks for your help :)