Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: Fix flaky test case for the iframe spec #38018

Merged
merged 2 commits into from
Dec 6, 2024
Merged

fix: Fix flaky test case for the iframe spec #38018

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2a83704
minor progress
sagar-qa007 Dec 6, 2024
5b0d7ad
Fix iframe test case
sagar-qa007 Dec 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
133 changes: 45 additions & 88 deletions app/client/cypress/e2e/Regression/ClientSide/Widgets/Iframe/IframeTest_spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,125 +1,55 @@
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 = `<!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 = () => {
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("1. Verify content and user interaction", function () {
propPane.UpdatePropertyFieldValue("URL", testdata.iframeUrl);
getIframeBody()
.find(".header-logo")
.should("have.attr", "href", testdata.iframeUrlSubstring);
EditorNavigation.SelectEntityByName("Iframe2", EntityType.Widget);
getIframeBody(1)
.find(".navbar__logo > img")
.eq(0)
.should("have.attr", "src")
.and("include", "logo");
Comment on lines +33 to +36
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Use locator variables instead of hardcoded CSS selectors

Replace the hardcoded CSS selector .navbar__logo > img with a locator variable or data-* attribute to adhere to the coding guidelines.

Suggested change:

Define a locator variable in CommonLocators.ts:

_pageHeaderLogoImage = ".navbar__logo > img";

Update the test code:

-getIframeBody(1)
-  .find(".navbar__logo > img")
+getIframeBody(1)
+  .find(locators._pageHeaderLogoImage)


// Title
propPane.UpdatePropertyFieldValue("Title", "Test Title");
agHelper.AssertAttribute(
".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",
);
});

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");
getIframeBody(1).find(locators._pageHeaderToggle).click({ force: true });
getIframeBody(1).find(locators._pageHeaderMenuList).should("be.visible");
});

it("3. Verify colors, borders and shadows", () => {
it("2. Verify colors, borders and shadows", () => {
propPane.MoveToTab("Style");

// Change Border Color
Expand All @@ -136,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");
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Replace hardcoded button text with locator variable

Use a locator variable instead of the hardcoded button text "Submit" to comply with the coding guidelines.

Suggested change:

Define a locator variable in CommonLocators.ts:

_submitButton = "button.t--widget-buttonwidget";

Update the test code:

-agHelper.ClickButton("Submit");
+agHelper.GetNClick(locators._submitButton);

getIframeBody(0)
.find("input")
.should("be.visible")
.invoke("val")
.then((inputValue) => {
expect(inputValue).to.equal("submitclicked");
});

propPane.UpdatePropertyFieldValue(
"srcDoc",
`<!DOCTYPE html>
<html lang="en">
<head></head>
<body></body>
</html>`,
);
agHelper.ValidateToastMessage("src updated");
});
},
);
1 change: 1 addition & 0 deletions app/client/cypress/fixtures/IframeWidgetPostMessage.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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":"<!DOCTYPE html>\n <html lang=\"en\">\n <head>\n </head>\n <body>\n <label class=\"custom-field one\" id=\"test\">\n <input type=\"text\" placeholder=\"getMsg\"/>\n </label>\n\n <script>\n const input = document.querySelector('input');\n input.addEventListener('change', (e) => {\n window.parent.postMessage(e.target.value, \"*\");\n });\n\n window.addEventListener('message', (e) => {\n input.value = e.data;\n });\n </script>\n </body>\n </html>","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}}
4 changes: 2 additions & 2 deletions app/client/cypress/fixtures/testdata.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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/"
}
2 changes: 1 addition & 1 deletion app/client/cypress/limited-tests.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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/**/**/*

Expand Down
4 changes: 2 additions & 2 deletions app/client/cypress/support/Objects/CommonLocators.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Comment on lines +329 to +330
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Use data- attributes instead of CSS selectors*

Replace the CSS selectors with data-* attributes to comply with the coding guidelines.

Suggested change:

If possible, assign data attributes to the elements and update the locators accordingly.

_enterFullScreen = ".application-demo-new-dashboard-control-enter-fullscreen";
_dashboardContainer = ".application-demo-new-dashboard-container";
_exitFullScreen = ".application-demo-new-dashboard-control-exit-fullscreen";
Expand Down
Loading