Add authentication to load tests

[rhysyngsun]

What are the relevant tickets?

Part of https://github.com/mitodl/hq/issues/11039

Description (What does it do?)

This adds code that logs the tests in via Keycloak so they can poke around as an authenticated user.

How can this be tested?

• Create a file for test user auth info in load_testing/data/ (e.g. load_testing/data/users.json) per the readme instructions.
• Run the load tests with user auth:

  k6 run learn.smoke.ts \
    -e BACKEND_BASE_URL=https://api.learn.odl.local \
    -e FRONTEND_BASE_URL=https://learn.odl.local \
    -e USERS_JSON_FILE=data/users.json \
    -e SSO_BASE_URL=https://keycloak.odl.local \
    -e IGNORE_HTTPS_ERRORS=true \
    --console-output test.log

• Inspect the output in test.log, you should see log statements regarding successful logins

[github-actions]

OpenAPI Changes

No changes detected

View full changelog

Unexpected changes? Ensure your branch is up-to-date with main (consider rebasing).

[mbertrand]

Got it working after some tweaks described here (running in WSL in case that matters). I added two users to the JSON file, one real and one fake.

The command I ran was slightly different since I don't have all the same aliases set up:

k6 run load_testing/learn.smoke.ts   \
-e BACKEND_BASE_URL=http://open.odl.local:8065   \
-e FRONTEND_BASE_URL=http://open.odl.local:8062   \
-e SSO_BASE_URL=http://kc.ol.local:8066   \
-e USERS_JSON_FILE=data/users.json \
-e IGNORE_HTTPS_ERRORS=true  \
--console-output test.log

[mbertrand]

Race condition + multi-element matcher. The data-testid mounts immediately as an empty wrapper; article children only appear after React Query resolves, so count() reads 0 and .nth(0).click() then hangs ~30s on a missing element. Also, the home page renders several ResourceCarousel instances — getByTestId matches them all; scope to first.

Suggested change

	async function home(page: Page, context: Context) {
	await page.goto(FRONTEND_BASE_URL)
	const carousel = page.getByTestId("resource-carousel").first()
	const articles = carousel.locator("article")
	try {
	await articles.first().waitFor({ timeout: 10_000 })
	} catch {
	// carousel never populated; let the assertion below report it
	}
	const articlesCount = await articles.count()
	await check(carousel, {
	"home page carousel has 12 items": () => articlesCount === 12,
	})
	if (articlesCount === 0) {
	return
	}
	await articles.nth(randomIntBetween(0, articlesCount - 1)).click()
	}

[mbertrand]

👍