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 :)