test: cypress - iframe regression tests (#28076)

iframe regression tests
appsmithorg · Oct 18, 2023 · 34f4d4f · 34f4d4f
1 parent 4a360a8
commit 34f4d4f
Show file tree

Hide file tree

Showing 3 changed files with 144 additions and 1 deletion.
diff --git a/app/client/cypress/e2e/Regression/ClientSide/Widgets/Iframe/IframeTest_spec.ts b/app/client/cypress/e2e/Regression/ClientSide/Widgets/Iframe/IframeTest_spec.ts
@@ -0,0 +1,135 @@
+import {
+ agHelper,
+ locators,
+ entityExplorer,
+ propPane,
+} from "../../../../../support/Objects/ObjectsCore";
+
+import testdata from "../../../../../fixtures/testdata.json";
+
+describe("Iframe widget Tests", function () {
+ before(() => {
+ entityExplorer.DragDropWidgetNVerify("iframewidget", 550, 100);
+ });
+
+ const srcDoc = `<!DOCTYPE html>
+ <html lang="en">
+ <head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Simple Iframe Widget Test</title>
+ </head>
+ <body>
+ <!-- Your iframe widget with a simple srcdoc content -->
+ <iframe srcdoc="<html><body><p>This is a simple srcdoc content.</p></body></html>" style="border: 2px solid red;"></iframe>
+ </body>
+ </html>`;
+
+ const getIframeBody = () => {
+ return cy
+ .get(".t--draggable-iframewidget iframe")
+ .its("0.contentDocument.body")
+ .should("not.be.empty")
+ .then(cy.wrap);
+ };
+
+ it("1. Verify content and user interaction", function () {
+ propPane.UpdatePropertyFieldValue("URL", testdata.iframeUrl);
+ getIframeBody()
+ .find(".header-logo")
+ .should("have.attr", "href", testdata.iframeUrlSubstring);
+
+ // Title
+ propPane.UpdatePropertyFieldValue("Title", "Test Title");
+ agHelper.AssertAttribute(
+ ".t--draggable-iframewidget iframe",
+ "title",
+ "Test Title",
+ );
+
+ // User interaction - Click
+ getIframeBody().find(locators._pageHeaderToggle).click({ force: true });
+ getIframeBody().find(locators._pageHeaderMenuList).should("be.visible");
+ getIframeBody().find(locators._pageHeaderToggle).click({ force: true });
+ getIframeBody().find(locators._pageHeaderMenuList).should("not.be.visible");
+
+ // Full screen
+ getIframeBody().find(locators._enterFullScreen).click({ force: true });
+ getIframeBody()
+ .find(locators._dashboardContainer)
+ .should(
+ "have.class",
+ "application-demo-new-dashboard-container-fullscreen",
+ );
+ getIframeBody().find(locators._exitFullScreen).click({ force: true });
+ getIframeBody()
+ .find(locators._dashboardContainer)
+ .should(
+ "not.have.class",
+ "application-demo-new-dashboard-container-fullscreen",
+ );
+ });
+
+ it("2. Verify onMessageReceived, onSrcDocChanged, onURLChanged", function () {
+ // onMessageReceived
+ propPane.SelectPlatformFunction("onMessageReceived", "Show alert");
+ agHelper.TypeText(
+ propPane._actionSelectorFieldByLabel("Message"),
+ "Message Received",
+ );
+ agHelper.GetNClick(propPane._actionSelectorPopupClose);
+
+ getIframeBody()
+ .find("a:contains('Social Feed')")
+ .first()
+ .click({ force: true });
+ agHelper.ValidateToastMessage("Message Received");
+
+ // onSrcDocChanged
+ propPane.SelectPlatformFunction("onSrcDocChanged", "Show alert");
+ agHelper.TypeText(
+ propPane._actionSelectorFieldByLabel("Message"),
+ "Value Changed",
+ );
+ agHelper.GetNClick(propPane._actionSelectorPopupClose);
+
+ propPane.UpdatePropertyFieldValue("srcDoc", srcDoc);
+ agHelper.ValidateToastMessage("Value Changed");
+ getIframeBody()
+ .find("iframe")
+ .its("0.contentDocument.body")
+ .find("p")
+ .should("have.text", "This is a simple srcdoc content.");
+
+ // onURLChanged
+ propPane.SelectPlatformFunction("onURLChanged", "Show alert");
+ agHelper.TypeText(
+ propPane._actionSelectorFieldByLabel("Message"),
+ "URL Changed",
+ );
+ agHelper.GetNClick(propPane._actionSelectorPopupClose);
+
+ propPane.UpdatePropertyFieldValue("URL", testdata.iframeRandomUrl);
+ agHelper.ValidateToastMessage("URL Changed");
+ });
+
+ it("3. Verify colors, borders and shadows", () => {
+ propPane.MoveToTab("Style");
+
+ // Border Color
+ propPane.SelectColorFromColorPicker("bordercolor", 10);
+ agHelper.AssertCSS("iframe", "border-color", "rgb(185, 28, 28)");
+
+ // Verify border
+ agHelper.GetNClick(propPane._segmentedControl("0px"));
+ agHelper.AssertCSS("iframe", "border-radius", "0px");
+
+ // Verify Box Shadow
+ agHelper.GetNClick(`${propPane._segmentedControl("0")}:contains('Large')`);
+ agHelper.AssertCSS(
+ "iframe",
+ "box-shadow",
+ "rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px",
+ );
+ });
+});
diff --git a/app/client/cypress/fixtures/testdata.json b/app/client/cypress/fixtures/testdata.json
@@ -163,5 +163,8 @@
  "fileBindingValue": "{{FilePicker1.isDirty}}",
  "UPGRADEUSERNAME": "[email protected]",
  "UPGRADEPASSWORD": "Test@123",
- "APPURL": "http:https://localhost:8081/app/app1/page1-63d38854252ca15b7ec9fabb"
+ "APPURL": "http:https://localhost:8081/app/app1/page1-63d38854252ca15b7ec9fabb",
+ "iframeUrl": "https://elfsight.com/social-feed-widget/iframe/",
+ "iframeUrlSubstring": "https://elfsight.com/",
+ "iframeRandomUrl": "https://www.google.com"
 }
diff --git a/app/client/cypress/support/Objects/CommonLocators.ts b/app/client/cypress/support/Objects/CommonLocators.ts
@@ -320,5 +320,10 @@ export class CommonLocators {
  _treeSelectedContent = ".rc-tree-select-selection-item-content";
  _switcherIcon = ".switcher-icon";
  _root = "#root";
+ _pageHeaderToggle = ".mobile-ui-page-header-toggle-icon";
+ _pageHeaderMenuList = ".mobile-ui-page-header-menu-list";
+ _enterFullScreen = ".application-demo-new-dashboard-control-enter-fullscreen";
+ _dashboardContainer = ".application-demo-new-dashboard-container";
+ _exitFullScreen = ".application-demo-new-dashboard-control-exit-fullscreen";
  _menuItem = ".bp3-menu-item";
 }