From 0b0f16de653d3a1b5c5f919f3d06f0925b612b26 Mon Sep 17 00:00:00 2001
From: kay delaney <45561153+kaydelaney@users.noreply.github.com>
Date: Mon, 19 May 2025 16:43:26 +0100
Subject: [PATCH] Dashboards/E2E: Add test validating transparent bg toggle
 behavior (#105619)

* Dashboards/E2E: Add test validating transparent bg toggle behavior

* fix test name
---
 ...shboards-edit-panel-transparent-bg.spec.ts | 27 +++++++++++++++++++
 1 file changed, 27 insertions(+)
 create mode 100644 e2e/dashboard-new-layouts/dashboards-edit-panel-transparent-bg.spec.ts

diff --git a/e2e/dashboard-new-layouts/dashboards-edit-panel-transparent-bg.spec.ts b/e2e/dashboard-new-layouts/dashboards-edit-panel-transparent-bg.spec.ts
new file mode 100644
index 00000000000..7e7bb717b75
--- /dev/null
+++ b/e2e/dashboard-new-layouts/dashboards-edit-panel-transparent-bg.spec.ts
@@ -0,0 +1,27 @@
+import { e2e } from '../utils';
+
+const PAGE_UNDER_TEST = '5SdHCadmz/panel-tests-graph';
+
+describe('Dashboard', () => {
+  beforeEach(() => {
+    e2e.flows.login(Cypress.env('USERNAME'), Cypress.env('PASSWORD'));
+  });
+
+  it('can toggle transparent background switch', () => {
+    e2e.pages.Dashboards.visit();
+    e2e.flows.openDashboard({ uid: `${PAGE_UNDER_TEST}?orgId=1` });
+
+    e2e.flows.scenes.toggleEditMode();
+
+    e2e.flows.scenes.selectPanel(/^No Data Points Warning$/);
+
+    e2e.components.Panels.Panel.title('No Data Points Warning').then((el) => {
+      cy.wrap(el.css('background')).should('not.match', /rgba\(0, 0, 0, 0\)/);
+    });
+
+    cy.get('#transparent-background').click({ force: true });
+    e2e.components.Panels.Panel.title('No Data Points Warning').then((el) => {
+      cy.wrap(el.css('background')).should('match', /rgba\(0, 0, 0, 0\)/);
+    });
+  });
+});