[Tests] Incorrect 2nd argument to window.getComputedStyle

[maxpatiiuk]

Priority impact

p - low

Test type

E2E tests

Which Component(s)

Button, Chip, ...

Unstable Tests

In several places in the code, Calcite's E2E tests call .getComputedStyle with :hover or :focus as the 2nd argument:

calcite-design-system/packages/calcite-components/src/components/button/button.e2e.ts

Lines 538 to 585 in 2305e01

	buttonFocusStyle = await buttonEl.getComputedStyle(":focus");
	expect(buttonFocusStyle.getPropertyValue("background-color")).toEqual("rgba(0, 0, 0, 0.04)");
	await buttonEl.hover();
	await page.waitForChanges();
	buttonHoverStyle = await buttonEl.getComputedStyle(":hover");
	expect(buttonHoverStyle.getPropertyValue("background-color")).toEqual("rgba(0, 0, 0, 0.04)");
	});
	});
	describe("when mode attribute is dark", () => {
	it("should render button pseudo classes with value tied to dark mode", async () => {
	page = await newE2EPage({
	html: `<div class="calcite-mode-dark">${buttonSnippet}</div>`,
	});
	buttonEl = await page.find("calcite-button >>> button");
	await buttonEl.focus();
	await page.waitForChanges();
	buttonFocusStyle = await buttonEl.getComputedStyle(":focus");
	expect(buttonFocusStyle.getPropertyValue("background-color")).toEqual("rgba(255, 255, 255, 0.04)");
	await buttonEl.hover();
	await page.waitForChanges();
	buttonHoverStyle = await buttonEl.getComputedStyle(":hover");
	expect(buttonHoverStyle.getPropertyValue("background-color")).toEqual("rgba(255, 255, 255, 0.04)");
	});
	});
	it("should allow the CSS custom property to be overridden", async () => {
	const overrideStyle = "rgba(255, 255, 0, 0.9)";
	page = await newE2EPage({
	html: `
	<style>
	:root {
	--calcite-color-transparent-hover: ${overrideStyle};
	}
	</style>
	<div>${buttonSnippet}</div>`,
	});
	buttonEl = await page.find("calcite-button >>> button");
	await buttonEl.focus();
	await page.waitForChanges();
	buttonFocusStyle = await buttonEl.getComputedStyle(":focus");
	expect(buttonFocusStyle.getPropertyValue("background-color")).toEqual(overrideStyle);
	await buttonEl.hover();
	await page.waitForChanges();
	buttonHoverStyle = await buttonEl.getComputedStyle(":hover");

As far as I am aware this is not valid. Per MDN, only ::after and ::before are allowed.
ChatGPT o1 says the same:

No, ":focus" is not a valid value for the second argument of window.getComputedStyle(). The second argument of window.getComputedStyle() is intended for pseudo-elements, not pseudo-classes. Pseudo-elements are parts of elements (like ::before, ::after), while pseudo-classes represent a state of an element (like :focus, :hover).

Test error, if applicable

While :hover and :focus appears to work fine in Chrome 119 (which is what your Stencil E2E tests are using), it does not appear to work in Chrome 128 (the latest version), causing failing tests.

You should refactor the usages in tests to not pass :hover or :focus

PR skipped, if applicable

No response

Additional Info

No response

[github-actions]

Installed and assigned for verification.

[DitwanP]

🍠✨ Verified