From 2a837041a3c64ab9d621beb69a2a3d0fa64a8df5 Mon Sep 17 00:00:00 2001 From: Sagar Khalasi Date: Fri, 6 Dec 2024 12:35:50 +0530 Subject: [PATCH 1/2] minor progress --- .../ClientSide/Widgets/Iframe/IframeTest_spec.ts | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) 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 index 3d67faf4003..be21dd3cfe1 100644 --- a/app/client/cypress/e2e/Regression/ClientSide/Widgets/Iframe/IframeTest_spec.ts +++ b/app/client/cypress/e2e/Regression/ClientSide/Widgets/Iframe/IframeTest_spec.ts @@ -37,7 +37,7 @@ describe( .then(cy.wrap); }; - it("1. Verify content and user interaction", function () { + it.only("1. Verify content and user interaction", function () { propPane.UpdatePropertyFieldValue("URL", testdata.iframeUrl); getIframeBody() .find(".header-logo") @@ -76,7 +76,7 @@ describe( ); }); - it("2. Verify onMessageReceived, onSrcDocChanged, onURLChanged", function () { + it.only("2. Verify onMessageReceived, onSrcDocChanged, onURLChanged", function () { // onMessageReceived propPane.SelectPlatformFunction("onMessageReceived", "Show alert"); agHelper.TypeText( @@ -88,7 +88,15 @@ describe( getIframeBody() .find("a:contains('Social Feed')") .first() - .click({ force: true }); + .dblclick({ force: true }); + + // getIframeBody() + // .find(".mobile-ui-page-header") + // .first() + // .click({ force: true }); + + + agHelper.ValidateToastMessage("Message Received"); // onSrcDocChanged From 5b0d7ad0a92123b412cb18c7b1814548f51e6ac4 Mon Sep 17 00:00:00 2001 From: Sagar Khalasi Date: Fri, 6 Dec 2024 16:12:25 +0530 Subject: [PATCH 2/2] Fix iframe test case --- .../Widgets/Iframe/IframeTest_spec.ts | 143 ++++++------------ .../fixtures/IframeWidgetPostMessage.json | 1 + app/client/cypress/fixtures/testdata.json | 4 +- app/client/cypress/limited-tests.txt | 2 +- .../cypress/support/Objects/CommonLocators.ts | 4 +- 5 files changed, 52 insertions(+), 102 deletions(-) create mode 100644 app/client/cypress/fixtures/IframeWidgetPostMessage.json 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 index be21dd3cfe1..9047459daf0 100644 --- a/app/client/cypress/e2e/Regression/ClientSide/Widgets/Iframe/IframeTest_spec.ts +++ b/app/client/cypress/e2e/Regression/ClientSide/Widgets/Iframe/IframeTest_spec.ts @@ -1,47 +1,39 @@ import { agHelper, locators, - entityExplorer, propPane, deployMode, + homePage, } from "../../../../../support/Objects/ObjectsCore"; -import testdata from "../../../../../fixtures/testdata.json"; +import EditorNavigation, { + EntityType, +} from "../../../../../support/Pages/EditorNavigation"; describe( "Iframe widget Tests", { tags: ["@tag.Widget", "@tag.Iframe", "@tag.Binding"] }, function () { before(() => { - entityExplorer.DragDropWidgetNVerify("iframewidget", 550, 100); + homePage.ImportApp("IframeWidgetPostMessage.json"); }); - const srcDoc = ` - - - - - Simple Iframe Widget Test - - - - - - `; - - const getIframeBody = () => { + const getIframeBody = (i: number) => { return cy .get(".t--draggable-iframewidget iframe") + .eq(i) .its("0.contentDocument.body") .should("not.be.empty") .then(cy.wrap); }; - it.only("1. Verify content and user interaction", function () { - propPane.UpdatePropertyFieldValue("URL", testdata.iframeUrl); - getIframeBody() - .find(".header-logo") - .should("have.attr", "href", testdata.iframeUrlSubstring); + it("1. Verify content and user interaction", function () { + EditorNavigation.SelectEntityByName("Iframe2", EntityType.Widget); + getIframeBody(1) + .find(".navbar__logo > img") + .eq(0) + .should("have.attr", "src") + .and("include", "logo"); // Title propPane.UpdatePropertyFieldValue("Title", "Test Title"); @@ -49,85 +41,15 @@ describe( ".t--draggable-iframewidget iframe", "title", "Test Title", + 1, ); // 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", - ); + getIframeBody(1).find(locators._pageHeaderToggle).click({ force: true }); + getIframeBody(1).find(locators._pageHeaderMenuList).should("be.visible"); }); - it.only("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() - .dblclick({ force: true }); - - // getIframeBody() - // .find(".mobile-ui-page-header") - // .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", () => { + it("2. Verify colors, borders and shadows", () => { propPane.MoveToTab("Style"); // Change Border Color @@ -144,12 +66,39 @@ describe( //Verify details in Deploy mode deployMode.DeployApp(); //agHelper.AssertCSS("iframe", "border-color", "rgb(185, 28, 28)"); - agHelper.AssertCSS("iframe", "border-radius", "0px"); + agHelper.AssertCSS("iframe", "border-radius", "0px", 1); 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", + 1, + ); + deployMode.NavigateBacktoEditor(); + }); + + it("3. Verify onMessageReceived, onSrcDocChanged, onURLChanged", function () { + EditorNavigation.SelectEntityByName("Iframe1", EntityType.Widget); + propPane.UpdatePropertyFieldValue("URL", " "); + agHelper.ValidateToastMessage("url updated"); + + agHelper.ClickButton("Submit"); + getIframeBody(0) + .find("input") + .should("be.visible") + .invoke("val") + .then((inputValue) => { + expect(inputValue).to.equal("submitclicked"); + }); + + propPane.UpdatePropertyFieldValue( + "srcDoc", + ` + + + + `, ); + agHelper.ValidateToastMessage("src updated"); }); }, ); diff --git a/app/client/cypress/fixtures/IframeWidgetPostMessage.json b/app/client/cypress/fixtures/IframeWidgetPostMessage.json new file mode 100644 index 00000000000..922f6744e07 --- /dev/null +++ b/app/client/cypress/fixtures/IframeWidgetPostMessage.json @@ -0,0 +1 @@ +{"artifactJsonType":"APPLICATION","clientSchemaVersion":1.0,"serverSchemaVersion":11.0,"exportedApplication":{"name":"Untitled application 2","isPublic":false,"pages":[{"id":"Page1","isDefault":true}],"publishedPages":[{"id":"Page1","isDefault":true}],"viewMode":false,"appIsExample":false,"unreadCommentThreads":0.0,"unpublishedApplicationDetail":{"appPositioning":{"type":"FIXED"},"navigationSetting":{},"themeSetting":{"sizing":1.0,"density":1.0,"appMaxWidth":"LARGE"}},"publishedApplicationDetail":{"appPositioning":{"type":"FIXED"},"navigationSetting":{},"themeSetting":{"sizing":1.0,"density":1.0,"appMaxWidth":"LARGE"}},"color":"#D9E7FF","icon":"uk-pounds","slug":"untitled-application-2","unpublishedCustomJSLibs":[],"publishedCustomJSLibs":[],"evaluationVersion":2.0,"applicationVersion":2.0,"collapseInvisibleWidgets":true,"isManualUpdate":false,"deleted":false},"datasourceList":[],"customJSLibList":[],"pageList":[{"unpublishedPage":{"name":"Page1","slug":"page1","layouts":[{"viewMode":false,"dsl":{"widgetName":"MainContainer","backgroundColor":"none","rightColumn":4896.0,"snapColumns":64.0,"detachFromLayout":true,"widgetId":"0","topRow":0.0,"bottomRow":690.0,"containerStyle":"none","snapRows":124.0,"parentRowSpace":1.0,"type":"CANVAS_WIDGET","canExtend":true,"version":90.0,"minHeight":1292.0,"dynamicTriggerPathList":[],"parentColumnSpace":1.0,"dynamicBindingPathList":[],"leftColumn":0.0,"children":[{"needsErrorInfo":false,"boxShadow":"{{appsmith.theme.boxShadow.appBoxShadow}}","mobileBottomRow":39.0,"widgetName":"Iframe1","dynamicPropertyPathList":[],"srcDoc":"\n \n \n \n \n \n\n \n \n ","topRow":7.0,"bottomRow":39.0,"parentRowSpace":10.0,"source":"","type":"IFRAME_WIDGET","mobileRightColumn":52.0,"borderOpacity":100.0,"animateLoading":true,"parentColumnSpace":13.0625,"dynamicTriggerPathList":[{"key":"onMessageReceived"},{"key":"onSrcDocChanged"},{"key":"onURLChanged"}],"leftColumn":29.0,"dynamicBindingPathList":[{"key":"borderRadius"},{"key":"boxShadow"}],"borderWidth":1.0,"flexVerticalAlignment":"start","key":"fueiozx7gr","rightColumn":53.0,"widgetId":"6i2a7e908e","isVisible":true,"version":1.0,"parentId":"0","renderMode":"CANVAS","isLoading":false,"mobileTopRow":7.0,"onURLChanged":"{{showAlert('url updated', '');}}","responsiveBehavior":"fill","borderRadius":"{{appsmith.theme.borderRadius.appBorderRadius}}","mobileLeftColumn":28.0,"onMessageReceived":"{{storeValue('text', Iframe1.message);\nshowAlert('Hey Iframe Called.', '');}}","onSrcDocChanged":"{{showAlert('src updated', '');}}"},{"resetFormOnClick":false,"needsErrorInfo":false,"boxShadow":"none","mobileBottomRow":31.0,"widgetName":"Button1","onClick":"{{postWindowMessage('submitclicked', \"Iframe1\", \"*\");}}","buttonColor":"{{appsmith.theme.colors.primaryColor}}","topRow":27.0,"bottomRow":31.0,"parentRowSpace":10.0,"type":"BUTTON_WIDGET","mobileRightColumn":14.0,"animateLoading":true,"parentColumnSpace":13.0625,"dynamicTriggerPathList":[{"key":"onClick"}],"leftColumn":0.0,"dynamicBindingPathList":[{"key":"buttonColor"},{"key":"borderRadius"}],"text":"Submit","isDisabled":false,"key":"co05qm838o","rightColumn":14.0,"isDefaultClickDisabled":true,"widgetId":"9lyzanrky4","minWidth":120.0,"isVisible":true,"recaptchaType":"V3","version":1.0,"parentId":"0","renderMode":"CANVAS","isLoading":false,"mobileTopRow":27.0,"responsiveBehavior":"hug","disabledWhenInvalid":false,"borderRadius":"{{appsmith.theme.borderRadius.appBorderRadius}}","mobileLeftColumn":0.0,"buttonVariant":"PRIMARY","placement":"CENTER"},{"needsErrorInfo":false,"boxShadow":"none","mobileBottomRow":16.0,"widgetName":"Input1","topRow":9.0,"bottomRow":16.0,"parentRowSpace":10.0,"labelWidth":5.0,"autoFocus":false,"type":"INPUT_WIDGET_V2","mobileRightColumn":19.0,"animateLoading":true,"parentColumnSpace":13.0625,"dynamicTriggerPathList":[],"resetOnSubmit":true,"leftColumn":0.0,"dynamicBindingPathList":[{"key":"accentColor"},{"key":"borderRadius"},{"key":"defaultText"}],"labelPosition":"Top","labelStyle":"","inputType":"TEXT","isDisabled":false,"key":"rionsri36t","labelTextSize":"0.875rem","isRequired":false,"rightColumn":19.0,"dynamicHeight":"FIXED","widgetId":"yd1qq15u3x","accentColor":"{{appsmith.theme.colors.primaryColor}}","showStepArrows":false,"minWidth":450.0,"isVisible":true,"label":"Label","version":2.0,"parentId":"0","labelAlignment":"left","renderMode":"CANVAS","isLoading":false,"mobileTopRow":9.0,"responsiveBehavior":"fill","borderRadius":"{{appsmith.theme.borderRadius.appBorderRadius}}","mobileLeftColumn":0.0,"maxDynamicHeight":9000.0,"iconAlign":"left","defaultText":"{{appsmith.store.text}}","minDynamicHeight":4.0},{"needsErrorInfo":false,"boxShadow":"{{appsmith.theme.boxShadow.appBoxShadow}}","mobileBottomRow":69.0,"widgetName":"Iframe2","topRow":37.0,"bottomRow":69.0,"parentRowSpace":10.0,"source":"https://docs.appsmith.com/","type":"IFRAME_WIDGET","mobileRightColumn":29.0,"borderOpacity":100.0,"animateLoading":true,"parentColumnSpace":13.0625,"dynamicTriggerPathList":[],"leftColumn":5.0,"dynamicBindingPathList":[{"key":"borderRadius"},{"key":"boxShadow"}],"borderWidth":1.0,"flexVerticalAlignment":"start","key":"e6wucjdesu","rightColumn":29.0,"widgetId":"bapiv4pebd","isVisible":true,"version":1.0,"parentId":"0","renderMode":"CANVAS","isLoading":false,"mobileTopRow":37.0,"responsiveBehavior":"fill","borderRadius":"{{appsmith.theme.borderRadius.appBorderRadius}}","mobileLeftColumn":5.0}]},"layoutOnLoadActions":[],"layoutOnLoadActionErrors":[],"validOnPageLoadActions":true,"id":"Page1","deleted":false,"policies":[],"userPermissions":[]}],"userPermissions":[],"policyMap":{}},"publishedPage":{"name":"Page1","slug":"page1","layouts":[{"viewMode":false,"dsl":{"widgetName":"MainContainer","backgroundColor":"none","rightColumn":1224.0,"snapColumns":16.0,"detachFromLayout":true,"widgetId":"0","topRow":0.0,"bottomRow":1250.0,"containerStyle":"none","snapRows":33.0,"parentRowSpace":1.0,"type":"CANVAS_WIDGET","canExtend":true,"version":4.0,"minHeight":1292.0,"dynamicTriggerPathList":[],"parentColumnSpace":1.0,"dynamicBindingPathList":[],"leftColumn":0.0,"children":[]},"validOnPageLoadActions":true,"id":"Page1","deleted":false,"policies":[],"userPermissions":[]}],"userPermissions":[],"policyMap":{}},"gitSyncId":"6752892a7db55e68232d2529_b5478fdf-4849-44e9-b4c1-152d6ec1bd9f","deleted":false}],"actionList":[],"actionCollectionList":[],"editModeTheme":{"name":"Default-New","displayName":"Modern","isSystemTheme":true,"deleted":false},"publishedTheme":{"name":"Default-New","displayName":"Modern","isSystemTheme":true,"deleted":false}} \ No newline at end of file diff --git a/app/client/cypress/fixtures/testdata.json b/app/client/cypress/fixtures/testdata.json index 313ad425fe2..0ae68508a0f 100644 --- a/app/client/cypress/fixtures/testdata.json +++ b/app/client/cypress/fixtures/testdata.json @@ -164,7 +164,7 @@ "UPGRADEUSERNAME": "arslan+upgrade160@appsmith.com", "UPGRADEPASSWORD": "Test@123", "APPURL": "http://localhost:8081/app/app1/page1-63d38854252ca15b7ec9fabb", - "iframeUrl": "https://elfsight.com/social-feed-widget/iframe/", - "iframeUrlSubstring": "https://elfsight.com/", + "iframeUrl": "https://docs.appsmith.com/build-apps/overview/", + "iframeUrlSubstring": "https://docs.appsmith.com/", "iframeRandomUrl": "https://www.appsmith.com/" } diff --git a/app/client/cypress/limited-tests.txt b/app/client/cypress/limited-tests.txt index aa00835ffb0..f5d04f8ed8e 100644 --- a/app/client/cypress/limited-tests.txt +++ b/app/client/cypress/limited-tests.txt @@ -1,5 +1,5 @@ # To run only limited tests - give the spec names in below format: -cypress/e2e/Regression/ClientSide/Templates/Fork_Template_spec.js +cypress/e2e/Regression/ClientSide/Widgets/Iframe/IframeTest_spec.ts # For running all specs - uncomment below: #cypress/e2e/**/**/* diff --git a/app/client/cypress/support/Objects/CommonLocators.ts b/app/client/cypress/support/Objects/CommonLocators.ts index e0015150943..d7a534bc443 100644 --- a/app/client/cypress/support/Objects/CommonLocators.ts +++ b/app/client/cypress/support/Objects/CommonLocators.ts @@ -326,8 +326,8 @@ 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"; + _pageHeaderToggle = ".navbar__items>button"; + _pageHeaderMenuList = ".navbar-sidebar__backdrop"; _enterFullScreen = ".application-demo-new-dashboard-control-enter-fullscreen"; _dashboardContainer = ".application-demo-new-dashboard-container"; _exitFullScreen = ".application-demo-new-dashboard-control-exit-fullscreen";