diff --git a/src/testing/puppeteer/puppeteer-element.ts b/src/testing/puppeteer/puppeteer-element.ts
index 116bb2a8a7a..b7fb74a31cc 100644
--- a/src/testing/puppeteer/puppeteer-element.ts
+++ b/src/testing/puppeteer/puppeteer-element.ts
@@ -385,11 +385,29 @@ export class E2EElement extends MockHTMLElement implements pd.E2EElementInternal
const computedStyle = window.getComputedStyle(elm, pseudoElt);
- const keys = Object.keys(computedStyle);
+ const keys = [
+ ...Object.keys(computedStyle),
+ /**
+ * include CSS variables defined within the style attribute
+ * of an element, e.g.:
+ * ```
+ *
+ * ```
+ */
+ ...Array.from((elm as HTMLElement).style),
+ ];
keys.forEach((key) => {
if (isNaN(key as any)) {
- const value = computedStyle[key as any];
+ const value =
+ /**
+ * access property directly for any known css property
+ */
+ computedStyle[key as any] ||
+ /**
+ * use `getPropertyValue` for css variables
+ */
+ computedStyle.getPropertyValue(key);
if (value != null) {
rtn[key] = value;
}
diff --git a/test/end-to-end/src/element-cmp/element-cmp.e2e.ts b/test/end-to-end/src/element-cmp/element-cmp.e2e.ts
index e0fa9a0996e..d9f276c62a6 100644
--- a/test/end-to-end/src/element-cmp/element-cmp.e2e.ts
+++ b/test/end-to-end/src/element-cmp/element-cmp.e2e.ts
@@ -56,4 +56,14 @@ describe('@Element', () => {
expect(elm).toEqualText('inner content');
});
+
+ it('should get computed styles of CSS vars assigned on host element', async () => {
+ const page = await newE2EPage({
+ html: `
+
+ `,
+ });
+ const el = await page.find('element-cmp');
+ expect((await el.getComputedStyle()).getPropertyValue('--my-component-text-color')).toEqual('rgb(255, 0, 0)');
+ });
});