How to use setWindowSize method in Webdriverio

Best JavaScript code snippet using webdriverio-monorepo

DynamicSideContent.spec.js

Source:DynamicSideContent.spec.js Github

copy

Full Screen

...20 it("set to 'true'", async () => {21 await browser.url(`http://localhost:${PORT}/test-resources/pages/DynamicSideContent.html`);22 const dynamicSideContent = await browser.$("ui5-dynamic-side-content");23 // set outer container width to > 1440 (XL)24 await browser.setWindowSize(1600, 500);25 await dynamicSideContent.setAttribute("equal-split", "");26 assert.ok((await dynamicSideContent.shadow$(".ui5-dsc-main").getAttribute("class")).includes("ui5-dsc-span-6"), "The main content takes 50% of the width");27 assert.ok((await dynamicSideContent.shadow$(".ui5-dsc-side").getAttribute("class")).includes("ui5-dsc-span-6"), "The side content takes 50% of the width");28 });29});30describe("'hideMainContent' property: ", () => {31 it("set to 'true'", async () => {32 await browser.url(`http://localhost:${PORT}/test-resources/pages/DynamicSideContent.html`);33 const dynamicSideContent = await browser.$("ui5-dynamic-side-content");34 // set outer container width to > 1440 (XL)35 await browser.setWindowSize(1600, 500);36 // hide only main content37 await dynamicSideContent.setAttribute("hide-main-content", "");38 assert.ok((await dynamicSideContent.shadow$(".ui5-dsc-main").getAttribute("class")).includes("ui5-dsc-span-0"), "The main content is not visible");39 assert.strictEqual((await dynamicSideContent.shadow$(".ui5-dsc-main").getCSSProperty("display")).value, "none", "The main content's 'display' property is 'none'");40 assert.ok((await dynamicSideContent.shadow$(".ui5-dsc-side").getAttribute("class")).includes("ui5-dsc-span-12"), "The side content takes 100% of the width");41 // hide side content too42 await dynamicSideContent.setAttribute("hide-side-content", "");43 assert.ok((await dynamicSideContent.shadow$(".ui5-dsc-main").getAttribute("class")).includes("ui5-dsc-span-0"), "The main content is not visible");44 assert.strictEqual((await dynamicSideContent.shadow$(".ui5-dsc-main").getCSSProperty("display")).value, "none", "The main content's 'display' property is 'none'");45 assert.ok((await dynamicSideContent.shadow$(".ui5-dsc-side").getAttribute("class")).includes("ui5-dsc-span-0"), "The side content is not visible");46 assert.strictEqual((await dynamicSideContent.shadow$(".ui5-dsc-side").getCSSProperty("display")).value, "none", "The side content's 'display' property is 'none'");47 });48});49describe("'hideSideContent' property: ", () => {50 it("set to 'true'", async () => {51 await browser.url(`http://localhost:${PORT}/test-resources/pages/DynamicSideContent.html`);52 const dynamicSideContent = await browser.$("ui5-dynamic-side-content");53 // set outer container width to > 1440 (XL)54 await browser.setWindowSize(1600, 500);55 // hide side content56 await dynamicSideContent.setAttribute("hide-side-content", "");57 assert.ok((await dynamicSideContent.shadow$(".ui5-dsc-side").getAttribute("class")).includes("ui5-dsc-span-0"), "The side content is not visible");58 assert.strictEqual((await dynamicSideContent.shadow$(".ui5-dsc-side").getCSSProperty("display")).value, "none", "The side content's 'display' property is 'none'");59 assert.ok((await dynamicSideContent.shadow$(".ui5-dsc-main").getAttribute("class")).includes("ui5-dsc-span-12"), "The main content takes 100% of the width");60 // hide main content too61 await dynamicSideContent.setAttribute("hide-main-content", "");62 assert.ok((await dynamicSideContent.shadow$(".ui5-dsc-side").getAttribute("class")).includes("ui5-dsc-span-0"), "The side content is not visible");63 assert.strictEqual((await dynamicSideContent.shadow$(".ui5-dsc-side").getCSSProperty("display")).value, "none", "The side content's 'display' property is 'none'");64 assert.ok((await dynamicSideContent.shadow$(".ui5-dsc-main").getAttribute("class")).includes("ui5-dsc-span-0"), "The main content is not visible");65 assert.strictEqual((await dynamicSideContent.shadow$(".ui5-dsc-main").getCSSProperty("display")).value, "none", "The main content's 'display' property is 'none'");66 });67});68describe("containers widths on XL size: ", () => {69 it("check for proper width", async () => {70 await browser.url(`http://localhost:${PORT}/test-resources/pages/DynamicSideContent.html`);71 const dynamicSideContent = await browser.$("ui5-dynamic-side-content");72 // set outer container width to > 1440 (XL)73 await browser.setWindowSize(1600, 500);74 assert.ok((await dynamicSideContent.shadow$(".ui5-dsc-main").getAttribute("class")).includes("ui5-dsc-span-9"), "The main content takes 75% of the width");75 assert.ok((await dynamicSideContent.shadow$(".ui5-dsc-side").getAttribute("class")).includes("ui5-dsc-span-3"), "The side content takes 25% of the width");76 });77});78describe("containers widths on L size: ", () => {79 it("check for proper width", async () => {80 await browser.url(`http://localhost:${PORT}/test-resources/pages/DynamicSideContent.html`);81 const dynamicSideContent = await browser.$("ui5-dynamic-side-content");82 // set outer container width to > 1024 and < 1440 (L)83 await browser.setWindowSize(1400, 500);84 assert.ok((await dynamicSideContent.shadow$(".ui5-dsc-main").getAttribute("class")).includes("ui5-dsc-span-8"), "The main content takes 66.66% of the width");85 assert.ok((await dynamicSideContent.shadow$(".ui5-dsc-side").getAttribute("class")).includes("ui5-dsc-span-4"), "The side content takes 33.33% of the width");86 });87});88describe("containers widths on M size: ", () => {89 it("check for proper width", async () => {90 await browser.url(`http://localhost:${PORT}/test-resources/pages/DynamicSideContent.html`);91 const dynamicSideContent = await browser.$("ui5-dynamic-side-content");92 // set outer container width to > 960 and < 1024 (M1)93 await browser.setWindowSize(1020, 500);94 assert.ok((await dynamicSideContent.shadow$(".ui5-dsc-main").getAttribute("class")).includes("ui5-dsc-span-fixed"), "The main content takes the width-340px");95 assert.ok((await dynamicSideContent.shadow$(".ui5-dsc-side").getAttribute("class")).includes("ui5-dsc-span-fixed"), "The side content takes fixed size of 340px");96 // set outer container width to > 720 and < 960 (M2)97 await browser.setWindowSize(950, 500);98 assert.ok((await dynamicSideContent.shadow$(".ui5-dsc-main").getAttribute("class")).includes("ui5-dsc-span-12"), "The main content takes 100% of the width");99 assert.ok((await dynamicSideContent.shadow$(".ui5-dsc-side").getAttribute("class")).includes("ui5-dsc-span-12"), "The side content takes 100% of the width");100 });101});102describe("containers widths on S size: ", () => {103 it("check for proper width", async () => {104 await browser.url(`http://localhost:${PORT}/test-resources/pages/DynamicSideContent.html`);105 const dynamicSideContent = await browser.$("ui5-dynamic-side-content");106 // set outer container width to < 720 (S)107 await browser.setWindowSize(700, 500);108 assert.ok((await dynamicSideContent.shadow$(".ui5-dsc-main").getAttribute("class")).includes("ui5-dsc-span-12"), "The main content takes 100% of the width");109 assert.ok((await dynamicSideContent.shadow$(".ui5-dsc-side").getAttribute("class")).includes("ui5-dsc-span-0"), "The side content is invisible");110 });111});112describe("'sideContentVisibility' property: ", () => {113 it("'AlwaysShow' - side content is always visible", async () => {114 await browser.url(`http://localhost:${PORT}/test-resources/pages/DynamicSideContent.html`);115 const dynamicSideContent = await browser.$("ui5-dynamic-side-content");116 await dynamicSideContent.setAttribute("side-content-visibility", "AlwaysShow");117 // set outer container width to > 1440 (XL)118 await browser.setWindowSize(1600, 500);119 assert.ok((await dynamicSideContent.shadow$(".ui5-dsc-side").getAttribute("class")).includes("ui5-dsc-span-3"), "The side content is visible");120 // set outer container width to > 1024 and < 1440 (L)121 await browser.setWindowSize(1400, 500);122 assert.ok((await dynamicSideContent.shadow$(".ui5-dsc-side").getAttribute("class")).includes("ui5-dsc-span-4"), "The side content is visible");123 // set outer container width to > 960 and < 1024 (M1)124 await browser.setWindowSize(1020, 500);125 assert.ok((await dynamicSideContent.shadow$(".ui5-dsc-side").getAttribute("class")).includes("ui5-dsc-span-fixed"), "The side content is visible");126 // set outer container width to > 720 and < 960 (M2)127 await browser.setWindowSize(950, 500);128 assert.ok((await dynamicSideContent.shadow$(".ui5-dsc-side").getAttribute("class")).includes("ui5-dsc-span-12"), "The side content is visible");129 // set outer container width to < 720 (S)130 await browser.setWindowSize(700, 500);131 assert.ok((await dynamicSideContent.shadow$(".ui5-dsc-side").getAttribute("class")).includes("ui5-dsc-span-12"), "The side content is visible");132 });133 it("'ShowAboveL' - side content is visible only on XL size", async () => {134 await browser.url(`http://localhost:${PORT}/test-resources/pages/DynamicSideContent.html`);135 const dynamicSideContent = await browser.$("ui5-dynamic-side-content");136 await dynamicSideContent.setAttribute("side-content-visibility", "ShowAboveL");137 // set outer container width to > 1440 (XL)138 await browser.setWindowSize(1600, 500);139 assert.ok((await dynamicSideContent.shadow$(".ui5-dsc-side").getAttribute("class")).includes("ui5-dsc-span-3"), "The side content is visible");140 // set outer container width to > 1024 and < 1440 (L)141 await browser.setWindowSize(1400, 500);142 assert.ok((await dynamicSideContent.shadow$(".ui5-dsc-side").getAttribute("class")).includes("ui5-dsc-span-0"), "The side content is not visible");143 // set outer container width to > 960 and < 1024 (M1)144 await browser.setWindowSize(1020, 500);145 assert.ok((await dynamicSideContent.shadow$(".ui5-dsc-side").getAttribute("class")).includes("ui5-dsc-span-0"), "The side content is not visible");146 // set outer container width to > 720 and < 960 (M2)147 await browser.setWindowSize(950, 500);148 assert.ok((await dynamicSideContent.shadow$(".ui5-dsc-side").getAttribute("class")).includes("ui5-dsc-span-0"), "The side content is not visible");149 // set outer container width to < 720 (S)150 await browser.setWindowSize(700, 500);151 assert.ok((await dynamicSideContent.shadow$(".ui5-dsc-side").getAttribute("class")).includes("ui5-dsc-span-0"), "The side content is not visible");152 });153 it("'ShowAboveM' - side content is visible on L and XL sizes", async () => {154 await browser.url(`http://localhost:${PORT}/test-resources/pages/DynamicSideContent.html`);155 const dynamicSideContent = await browser.$("ui5-dynamic-side-content");156 await dynamicSideContent.setAttribute("side-content-visibility", "ShowAboveM");157 // set outer container width to > 1440 (XL)158 await browser.setWindowSize(1600, 500);159 assert.ok((await dynamicSideContent.shadow$(".ui5-dsc-side").getAttribute("class")).includes("ui5-dsc-span-3"), "The side content is visible");160 // set outer container width to > 1024 and < 1440 (L)161 await browser.setWindowSize(1400, 500);162 assert.ok((await dynamicSideContent.shadow$(".ui5-dsc-side").getAttribute("class")).includes("ui5-dsc-span-4"), "The side content not visible");163 // set outer container width to > 960 and < 1024 (M1)164 await browser.setWindowSize(1020, 500);165 assert.ok((await dynamicSideContent.shadow$(".ui5-dsc-side").getAttribute("class")).includes("ui5-dsc-span-0"), "The side content is not visible");166 // set outer container width to > 720 and < 960 (M2)167 await browser.setWindowSize(950, 500);168 assert.ok((await dynamicSideContent.shadow$(".ui5-dsc-side").getAttribute("class")).includes("ui5-dsc-span-0"), "The side content is not visible");169 // set outer container width to < 720 (S)170 await browser.setWindowSize(700, 500);171 assert.ok((await dynamicSideContent.shadow$(".ui5-dsc-side").getAttribute("class")).includes("ui5-dsc-span-0"), "The side content is not visible");172 });173 it("'ShowAboveS' - side content is visible on M, L and XL sizes", async () => {174 await browser.url(`http://localhost:${PORT}/test-resources/pages/DynamicSideContent.html`);175 const dynamicSideContent = await browser.$("ui5-dynamic-side-content");176 await dynamicSideContent.setAttribute("side-content-visibility", "ShowAboveS");177 // set outer container width to > 1440 (XL)178 await browser.setWindowSize(1600, 500);179 assert.ok((await dynamicSideContent.shadow$(".ui5-dsc-side").getAttribute("class")).includes("ui5-dsc-span-3"), "The side content is visible");180 // set outer container width to > 1024 and < 1440 (L)181 await browser.setWindowSize(1400, 500);182 assert.ok((await dynamicSideContent.shadow$(".ui5-dsc-side").getAttribute("class")).includes("ui5-dsc-span-4"), "The side content not visible");183 // set outer container width to > 960 and < 1024 (M1)184 await browser.setWindowSize(1020, 500);185 assert.ok((await dynamicSideContent.shadow$(".ui5-dsc-side").getAttribute("class")).includes("ui5-dsc-span-fixed"), "The side content is visible");186 // set outer container width to > 720 and < 960 (M2)187 await browser.setWindowSize(950, 500);188 assert.ok((await dynamicSideContent.shadow$(".ui5-dsc-side").getAttribute("class")).includes("ui5-dsc-span-12"), "The side content is visible");189 // set outer container width to < 720 (S)190 await browser.setWindowSize(700, 500);191 assert.ok((await dynamicSideContent.shadow$(".ui5-dsc-side").getAttribute("class")).includes("ui5-dsc-span-0"), "The side content is not visible");192 });193 it("'NeverShow' - side content is not visible on any size", async () => {194 await browser.url(`http://localhost:${PORT}/test-resources/pages/DynamicSideContent.html`);195 const dynamicSideContent = await browser.$("ui5-dynamic-side-content");196 await dynamicSideContent.setAttribute("side-content-visibility", "NeverShow");197 // set outer container width to > 1440 (XL)198 await browser.setWindowSize(1600, 500);199 assert.ok((await dynamicSideContent.shadow$(".ui5-dsc-side").getAttribute("class")).includes("ui5-dsc-span-0"), "The side content is not visible");200 // set outer container width to > 1024 and < 1440 (L)201 await browser.setWindowSize(1400, 500);202 assert.ok((await dynamicSideContent.shadow$(".ui5-dsc-side").getAttribute("class")).includes("ui5-dsc-span-0"), "The side content is not visible");203 // set outer container width to > 960 and < 1024 (M1)204 await browser.setWindowSize(1020, 500);205 assert.ok((await dynamicSideContent.shadow$(".ui5-dsc-side").getAttribute("class")).includes("ui5-dsc-span-0"), "The side content is not visible");206 // set outer container width to > 720 and < 960 (M2)207 await browser.setWindowSize(950, 500);208 assert.ok((await dynamicSideContent.shadow$(".ui5-dsc-side").getAttribute("class")).includes("ui5-dsc-span-0"), "The side content is not visible");209 // set outer container width to < 720 (S)210 await browser.setWindowSize(700, 500);211 assert.ok((await dynamicSideContent.shadow$(".ui5-dsc-side").getAttribute("class")).includes("ui5-dsc-span-0"), "The side content is not visible");212 });213});214describe("'sideContentFallDown' property: ", () => {215 it("'BelowXL' - side content falls down on sizes below XL", async () => {216 await browser.url(`http://localhost:${PORT}/test-resources/pages/DynamicSideContent.html`);217 const dynamicSideContent = await browser.$("ui5-dynamic-side-content");218 await dynamicSideContent.setAttribute("side-content-fall-down", "BelowXL");219 // set outer container width to > 1440 (XL)220 await browser.setWindowSize(1600, 500);221 assert.ok((await dynamicSideContent.shadow$(".ui5-dsc-side").getAttribute("class")).includes("ui5-dsc-span-3"), "The side content does not fall down");222 // set outer container width to > 1024 and < 1440 (L)223 await browser.setWindowSize(1400, 500);224 assert.ok((await dynamicSideContent.shadow$(".ui5-dsc-side").getAttribute("class")).includes("ui5-dsc-span-12"), "The side content falls down");225 // set outer container width to > 960 and < 1024 (M1)226 await browser.setWindowSize(1020, 500);227 assert.ok((await dynamicSideContent.shadow$(".ui5-dsc-side").getAttribute("class")).includes("ui5-dsc-span-12"), "The side content falls down");228 // set outer container width to > 720 and < 960 (M2)229 await browser.setWindowSize(950, 500);230 assert.ok((await dynamicSideContent.shadow$(".ui5-dsc-side").getAttribute("class")).includes("ui5-dsc-span-12"), "The side content falls down");231 // set outer container width to < 720 (S)232 await browser.setWindowSize(700, 500);233 assert.ok((await dynamicSideContent.shadow$(".ui5-dsc-side").getAttribute("class")).includes("ui5-dsc-span-0"), "The side content is not visible");234 });235 it("'BelowL' - side content falls down on sizes below L", async () => {236 await browser.url(`http://localhost:${PORT}/test-resources/pages/DynamicSideContent.html`);237 const dynamicSideContent = await browser.$("ui5-dynamic-side-content");238 await dynamicSideContent.setAttribute("side-content-fall-down", "BelowL");239 // set outer container width to > 1440 (XL)240 await browser.setWindowSize(1600, 500);241 assert.ok((await dynamicSideContent.shadow$(".ui5-dsc-side").getAttribute("class")).includes("ui5-dsc-span-3"), "The side content does not fall down");242 // set outer container width to > 1024 and < 1440 (L)243 await browser.setWindowSize(1400, 500);244 assert.ok((await dynamicSideContent.shadow$(".ui5-dsc-side").getAttribute("class")).includes("ui5-dsc-span-4"), "The side content does not fall down");245 // set outer container width to > 960 and < 1024 (M1)246 await browser.setWindowSize(1020, 500);247 assert.ok((await dynamicSideContent.shadow$(".ui5-dsc-side").getAttribute("class")).includes("ui5-dsc-span-12"), "The side content falls down");248 // set outer container width to > 720 and < 960 (M2)249 await browser.setWindowSize(950, 500);250 assert.ok((await dynamicSideContent.shadow$(".ui5-dsc-side").getAttribute("class")).includes("ui5-dsc-span-12"), "The side content falls down");251 // set outer container width to < 720 (S)252 await browser.setWindowSize(700, 500);253 assert.ok((await dynamicSideContent.shadow$(".ui5-dsc-side").getAttribute("class")).includes("ui5-dsc-span-0"), "The side content is not visible");254 });255 it("'BelowM' - side content falls down on sizes below M", async () => {256 await browser.url(`http://localhost:${PORT}/test-resources/pages/DynamicSideContent.html`);257 const dynamicSideContent = await browser.$("ui5-dynamic-side-content");258 await dynamicSideContent.setAttribute("side-content-fall-down", "BelowM");259 // set outer container width to > 1440 (XL)260 await browser.setWindowSize(1600, 500);261 assert.ok((await dynamicSideContent.shadow$(".ui5-dsc-side").getAttribute("class")).includes("ui5-dsc-span-3"), "The side content does not fall down");262 // set outer container width to > 1024 and < 1440 (L)263 await browser.setWindowSize(1400, 500);264 assert.ok((await dynamicSideContent.shadow$(".ui5-dsc-side").getAttribute("class")).includes("ui5-dsc-span-4"), "The side content does not fall down");265 // set outer container width to > 960 and < 1024 (M1)266 await browser.setWindowSize(1020, 500);267 assert.ok((await dynamicSideContent.shadow$(".ui5-dsc-side").getAttribute("class")).includes("ui5-dsc-span-fixed"), "The side content does not fall down");268 // set outer container width to > 720 and < 960 (M2)269 await browser.setWindowSize(950, 500);270 assert.ok((await dynamicSideContent.shadow$(".ui5-dsc-side").getAttribute("class")).includes("ui5-dsc-span-fixed"), "The side content does not fall down");271 // set outer container width to < 720 (S)272 await browser.setWindowSize(700, 500);273 assert.ok((await dynamicSideContent.shadow$(".ui5-dsc-side").getAttribute("class")).includes("ui5-dsc-span-0"), "The side content is not visible");274 });275 it("'onMinimumWidth' - side content falls down on sizes below M1 (960px)", async () => {276 await browser.url(`http://localhost:${PORT}/test-resources/pages/DynamicSideContent.html`);277 const dynamicSideContent = await browser.$("ui5-dynamic-side-content");278 await dynamicSideContent.setAttribute("side-content-fall-down", "OnMinimumWidth");279 // set outer container width to > 1440 (XL)280 await browser.setWindowSize(1600, 500);281 assert.ok((await dynamicSideContent.shadow$(".ui5-dsc-side").getAttribute("class")).includes("ui5-dsc-span-3"), "The side content does not fall down");282 // set outer container width to > 1024 and < 1440 (L)283 await browser.setWindowSize(1400, 500);284 assert.ok((await dynamicSideContent.shadow$(".ui5-dsc-side").getAttribute("class")).includes("ui5-dsc-span-4"), "The side content does not fall down");285 // set outer container width to > 960 and < 1024 (M1)286 await browser.setWindowSize(1020, 500);287 assert.ok((await dynamicSideContent.shadow$(".ui5-dsc-side").getAttribute("class")).includes("ui5-dsc-span-fixed"), "The side content does not fall down");288 // set outer container width to > 720 and < 960 (M2)289 await browser.setWindowSize(950, 500);290 assert.ok((await dynamicSideContent.shadow$(".ui5-dsc-side").getAttribute("class")).includes("ui5-dsc-span-12"), "The side content falls down");291 // set outer container width to < 720 (S)292 await browser.setWindowSize(700, 500);293 assert.ok((await dynamicSideContent.shadow$(".ui5-dsc-side").getAttribute("class")).includes("ui5-dsc-span-0"), "The side content is not visible");294 });295});296describe("'toggleContents' method: ", () => {297 it("toggles contents on S size", async () => {298 await browser.url(`http://localhost:${PORT}/test-resources/pages/DynamicSideContent.html`);299 const dynamicSideContent = await browser.$("ui5-dynamic-side-content");300 // set outer container width to < 720 (S)301 await browser.setWindowSize(700, 500);302 assert.ok((await dynamicSideContent.shadow$(".ui5-dsc-main").getAttribute("class")).includes("ui5-dsc-span-12"), "The main content takes 100% of the width");303 assert.ok((await dynamicSideContent.shadow$(".ui5-dsc-side").getAttribute("class")).includes("ui5-dsc-span-0"), "The side content is invisible");304 await browser.executeAsync(function(done) {305 document.getElementById("dynamicSideContent").toggleContents();306 done();307 });308 assert.ok((await dynamicSideContent.shadow$(".ui5-dsc-main").getAttribute("class")).includes("ui5-dsc-span-0"), "The main content is invisible");309 assert.ok((await dynamicSideContent.shadow$(".ui5-dsc-side").getAttribute("class")).includes("ui5-dsc-span-12"), "The side content takes 100% of the width");310 await browser.executeAsync(function(done) {311 document.getElementById("dynamicSideContent").toggleContents();312 done();313 });314 assert.ok((await dynamicSideContent.shadow$(".ui5-dsc-main").getAttribute("class")).includes("ui5-dsc-span-12"), "The main content takes 100% of the width");315 assert.ok((await dynamicSideContent.shadow$(".ui5-dsc-side").getAttribute("class")).includes("ui5-dsc-span-0"), "The side content is invisible");316 });317 it("does nothing on M size", async () => {318 await browser.url(`http://localhost:${PORT}/test-resources/pages/DynamicSideContent.html`);319 const dynamicSideContent = await browser.$("ui5-dynamic-side-content");320 // set outer container width to > 720 (M)321 await browser.setWindowSize(900, 500);322 assert.ok((await dynamicSideContent.shadow$(".ui5-dsc-main").getAttribute("class")).includes("ui5-dsc-span-12"), "The main content is visible");323 assert.ok((await dynamicSideContent.shadow$(".ui5-dsc-side").getAttribute("class")).includes("ui5-dsc-span-12"), "The side content is visible");324 await browser.executeAsync(function(done) {325 document.getElementById("dynamicSideContent").toggleContents();326 done();327 });328 assert.ok((await dynamicSideContent.shadow$(".ui5-dsc-main").getAttribute("class")).includes("ui5-dsc-span-12"), "The main content is visible");329 assert.ok((await dynamicSideContent.shadow$(".ui5-dsc-side").getAttribute("class")).includes("ui5-dsc-span-12"), "The side content is visible");330 });331 it("does nothing on L size", async () => {332 await browser.url(`http://localhost:${PORT}/test-resources/pages/DynamicSideContent.html`);333 const dynamicSideContent = await browser.$("ui5-dynamic-side-content");334 // set outer container width to > 1024 (L)335 await browser.setWindowSize(1300, 500);336 assert.ok((await dynamicSideContent.shadow$(".ui5-dsc-main").getAttribute("class")).includes("ui5-dsc-span-8"), "The main content is visible");337 assert.ok((await dynamicSideContent.shadow$(".ui5-dsc-side").getAttribute("class")).includes("ui5-dsc-span-4"), "The side content is visible");338 await browser.executeAsync(function(done) {339 document.getElementById("dynamicSideContent").toggleContents();340 done();341 });342 assert.ok((await dynamicSideContent.shadow$(".ui5-dsc-main").getAttribute("class")).includes("ui5-dsc-span-8"), "The main content is visible");343 assert.ok((await dynamicSideContent.shadow$(".ui5-dsc-side").getAttribute("class")).includes("ui5-dsc-span-4"), "The side content is visible");344 });345 it("does nothing on XL size", async () => {346 await browser.url(`http://localhost:${PORT}/test-resources/pages/DynamicSideContent.html`);347 const dynamicSideContent = await browser.$("ui5-dynamic-side-content");348 // set outer container width to > 1440 (XL)349 await browser.setWindowSize(1600, 500);350 assert.ok((await dynamicSideContent.shadow$(".ui5-dsc-main").getAttribute("class")).includes("ui5-dsc-span-9"), "The main content is visible");351 assert.ok((await dynamicSideContent.shadow$(".ui5-dsc-side").getAttribute("class")).includes("ui5-dsc-span-3"), "The side content is visible");352 await browser.executeAsync(function(done) {353 document.getElementById("dynamicSideContent").toggleContents();354 done();355 });356 assert.ok((await dynamicSideContent.shadow$(".ui5-dsc-main").getAttribute("class")).includes("ui5-dsc-span-9"), "The main content is visible");357 assert.ok((await dynamicSideContent.shadow$(".ui5-dsc-side").getAttribute("class")).includes("ui5-dsc-span-3"), "The side content is visible");358 });359});360describe("'layout-change' event: ", () => {361 it("fired when change the breakpoint", async () => {362 await browser.url(`http://localhost:${PORT}/test-resources/pages/DynamicSideContent.html`);363 const dynamicSideContent = await browser.$("ui5-dynamic-side-content");364 const currentBreakpoint = await browser.$("#currentBreakpoint");365 const previousBreakpoint = await browser.$("#previousBreakpoint");366 const mainVisible = await browser.$("#mainVisible");367 const sideVisible = await browser.$("#sideVisible");368 // set outer container width to > 1440 (XL)369 await browser.setWindowSize(1600, 500);370 // set outer container width to > 1024 and < 1440 (L)371 await browser.setWindowSize(1200, 500);372 assert.strictEqual(await currentBreakpoint.getValue(), "L", "The event returns correct breakpoint");373 assert.strictEqual(await previousBreakpoint.getValue(), "XL", "The event returns correct previous breakpoint");374 assert.strictEqual(await mainVisible.getValue(), "1", "The event returns correct main content visibility");375 assert.strictEqual(await sideVisible.getValue(), "1", "The event returns correct side content visibility");376 // set outer container width to > 720 and < 1024 (M)377 await browser.setWindowSize(800, 500);378 assert.strictEqual(await currentBreakpoint.getValue(), "M", "The event returns correct breakpoint");379 assert.strictEqual(await previousBreakpoint.getValue(), "L", "The event returns correct previous breakpoint");380 assert.strictEqual(await mainVisible.getValue(), "1", "The event returns correct main content visibility");381 assert.strictEqual(await sideVisible.getValue(), "1", "The event returns correct side content visibility");382 // set outer container width to < 720 (S)383 await browser.setWindowSize(600, 500);384 assert.strictEqual(await currentBreakpoint.getValue(), "S", "The event returns correct breakpoint");385 assert.strictEqual(await previousBreakpoint.getValue(), "M", "The event returns correct previous breakpoint");386 assert.strictEqual(await mainVisible.getValue(), "1", "The event returns correct main content visibility");387 assert.strictEqual(await sideVisible.getValue(), "0", "The event returns correct side content visibility");388 // set outer container width to > 1440 (XL)389 await browser.setWindowSize(1600, 500);390 assert.strictEqual(await currentBreakpoint.getValue(), "XL", "The event returns correct breakpoint");391 assert.strictEqual(await previousBreakpoint.getValue(), "S", "The event returns correct previous breakpoint");392 assert.strictEqual(await mainVisible.getValue(), "1", "The event returns correct main content visibility");393 assert.strictEqual(await sideVisible.getValue(), "1", "The event returns correct side content visibility");394 });395});396describe("ARIA attributes: ", () => {397 it("exist", async () => {398 await browser.url(`http://localhost:${PORT}/test-resources/pages/DynamicSideContent.html`);399 const dynamicSideContent = await browser.$("ui5-dynamic-side-content");400 assert.strictEqual(await dynamicSideContent.shadow$(".ui5-dsc-side").getAttribute("aria-label"), "Side Content", "'aria-label' attribute is set correctly");401 assert.strictEqual(await dynamicSideContent.shadow$(".ui5-dsc-side").getAttribute("role"), "complementary", "'role' attribute is set correctly");402 });403});

Full Screen

Full Screen

example.hermione.js

Source:example.hermione.js Github

copy

Full Screen

...17 };18 await this.browser.url(baseUrl + '/');19 await this.browser.execute(() => localStorage.clear());20 await this.browser.refresh();21 await this.browser.setWindowSize(1920, 1080);22 await this.browser.assertView('main_big-size', '.Application', optionsForScreenShot);23 await this.browser.setWindowSize(800, 1080);24 await this.browser.assertView('main_medium-size', '.Application', optionsForScreenShot);25 await this.browser.setWindowSize(600, 1080);26 await this.browser.assertView('main_small-size', '.Application', optionsForScreenShot);27 await this.browser.setWindowSize(480, 1080);28 await this.browser.assertView('main_very-small-size', '.Application', optionsForScreenShot);29 await this.browser.url(baseUrl + '/catalog');30 await this.browser.setWindowSize(1920, 1080);31 await this.browser.assertView('catalog_big-size', '.Application', optionsForScreenShot);32 await this.browser.setWindowSize(800, 1080);33 await this.browser.assertView('catalog_medium-size', '.Application', optionsForScreenShot);34 await this.browser.setWindowSize(600, 1080);35 await this.browser.assertView('catalog_small-size', '.Application', optionsForScreenShot);36 await this.browser.setWindowSize(480, 1080);37 await this.browser.assertView('catalog_very-small-size', '.Application', optionsForScreenShot);38 await this.browser.url(baseUrl + '/delivery');39 await this.browser.setWindowSize(1920, 1080);40 await this.browser.assertView('delivery_big-size', '.Application', optionsForScreenShot);41 await this.browser.setWindowSize(800, 1080);42 await this.browser.assertView('delivery_medium-size', '.Application', optionsForScreenShot);43 await this.browser.setWindowSize(600, 1080);44 await this.browser.assertView('delivery_small-size', '.Application', optionsForScreenShot);45 await this.browser.setWindowSize(480, 1080);46 await this.browser.assertView('delivery_very-small-size', '.Application', optionsForScreenShot);47 await this.browser.url(baseUrl + '/contacts');48 await this.browser.setWindowSize(1920, 1080);49 await this.browser.assertView('contacts_big-size', '.Application', optionsForScreenShot);50 await this.browser.setWindowSize(800, 1080);51 await this.browser.assertView('contacts_medium-size', '.Application', optionsForScreenShot);52 await this.browser.setWindowSize(600, 1080);53 await this.browser.assertView('contacts_small-size', '.Application', optionsForScreenShot);54 await this.browser.setWindowSize(480, 1080);55 await this.browser.assertView('contacts_very-small-size', '.Application', optionsForScreenShot);56 await this.browser.url(baseUrl + '/cart');57 await this.browser.setWindowSize(1920, 1080);58 await this.browser.assertView('cart_big-size', '.Application', optionsForScreenShot);59 await this.browser.setWindowSize(800, 1080);60 await this.browser.assertView('cart_medium-size', '.Application', optionsForScreenShot);61 await this.browser.setWindowSize(600, 1080);62 await this.browser.assertView('cart_small-size', '.Application', optionsForScreenShot);63 await this.browser.setWindowSize(480, 1080);64 await this.browser.assertView('cart_very-small-size', '.Application', optionsForScreenShot);65});66it('Страницы: главная, условия доставки и контакты - имеют статическое содержимое', async function () {67 const optionsForScreenShot = {68 allowViewportOverflow: true,69 };70 await this.browser.url(baseUrl + '/');71 await this.browser.refresh();72 await this.browser.setWindowSize(1920, 1080);73 await this.browser.execute(() => localStorage.clear());74 await this.browser.refresh();75 await this.browser.assertView('main_is-static', '.Application', optionsForScreenShot);76 await this.browser.url(baseUrl + '/delivery');77 await this.browser.refresh();78 await this.browser.assertView('delivery_is-static', '.Application', optionsForScreenShot);79 await this.browser.url(baseUrl + '/contacts');80 await this.browser.refresh();81 await this.browser.assertView('contacts_is-static', '.Application', optionsForScreenShot);82});83it('Корзина в хедере должна указывать количество уникальных добавленных товаров', async function () {84 await this.browser.url(baseUrl + '/catalog');85 await this.browser.setWindowSize(1920, 1080);86 await this.browser.execute(() => localStorage.clear());87 await this.browser.refresh();88 await this.browser.$('.ProductItem-DetailsLink').click();89 for (let i = 0; i < 5; i += 1) {90 await this.browser.$('.ProductDetails-AddToCart').click();91 }92 let cart = '';93 const elems = await this.browser.$$('.nav-link');94 for (let i = 0; i < elems.length; i += 1) {95 const textOfElem = await elems[i].getText();96 if (textOfElem.includes('Cart')) {97 cart = textOfElem;98 }99 }...

Full Screen

Full Screen

commands.js

Source:commands.js Github

copy

Full Screen

1import browser from 'webextension-polyfill'2import { sendMessage } from '../IO/message-port'3// If you change aynthing here make sure to also change plugin-manifest.json4export const CommandIds = {5 CheckWindow: 'eyesCheckWindow',6 CheckElement: 'eyesCheckElement',7 SetMatchLevel: 'eyesSetMatchLevel',8 SetMatchTimeout: 'eyesSetMatchTimeout',9 SetViewportSize: 'eyesSetViewportSize',10 SetBaselineEnvName: 'eyesSetBaselineEnvName',11 SetPreRenderHook: 'eyesSetPreRenderHook',12}13const CommandNames = Object.values(CommandIds)14export function isEyesCommand(command, exclusions = []) {15 return CommandNames.includes(command.command) && !exclusions.includes(command.command)16}17export function isCheckCommand(command) {18 return command.command === CommandIds.CheckWindow || command.command === CommandIds.CheckElement19}20export function containsEyesCommands(commands, exclusions) {21 if (!Array.isArray(commands)) return false22 return !!commands.find(command => isEyesCommand(command, exclusions))23}24export async function dedupeSetWindowSizeIfNecessary() {25 const { commands } = await sendMessage({26 uri: '/record/command',27 verb: 'get',28 })29 const setWindowSize = commands.find(cmd => cmd.command === 'setWindowSize')30 if (setWindowSize) {31 return sendMessage({32 uri: '/record/command',33 verb: 'delete',34 payload: {35 id: setWindowSize.id,36 },37 })38 }39}40export async function elevateSetWindowSizeIfNecessary() {41 const { commands } = await sendMessage({42 uri: '/record/command',43 verb: 'get',44 })45 const hasSetViewportSize = !!commands.find(cmd => cmd.command === CommandIds.SetViewportSize)46 if (!hasSetViewportSize) {47 const tabId = (48 await sendMessage({49 uri: '/record/tab',50 verb: 'get',51 })52 ).id53 const { width, height } = await getTabViewportSize(tabId)54 const setWindowSize = commands.find(cmd => cmd.command === 'setWindowSize')55 if (setWindowSize) {56 return sendMessage({57 uri: '/record/command',58 verb: 'put',59 payload: {60 id: setWindowSize.id,61 command: CommandIds.SetViewportSize,62 target: `${width}x${height}`,63 value: '',64 },65 })66 }67 }68}69export async function getTabViewportSize(tabId) {70 const tab = await browser.tabs.get(tabId)71 return {72 width: tab.width,73 height: Math.max(tab.height - 100, 100),74 }...

Full Screen

Full Screen

useWindowSize.js

Source:useWindowSize.js Github

copy

Full Screen

...9 if (window.innerHeight > 768 && window.innerWidth > 1366) {10 const currentRatio = window.innerHeight / window.innerWidth;11 const ratio = 768 / 1366;12 if (ratio < currentRatio) {13 setWindowSize({14 width: 1366,15 height: window.innerHeight * (1366 / window.innerWidth),16 transform: `scale(${window.innerWidth / 1366})`,17 });18 } else if (ratio > currentRatio) {19 setWindowSize({20 width: window.innerWidth * (768 / window.innerHeight),21 height: 768,22 transform: `scale(${window.innerHeight / 768})`,23 });24 } else {25 setWindowSize({26 width: 1366,27 height: 768,28 transform: `scale(${window.innerHeight / 768})`,29 });30 }31 }32 setWindowSize({33 width: window.innerWidth,34 height: window.innerHeight,35 isMobile: window.innerWidth <= 760,36 transform: `scale(1)`,37 });38 }39 window.addEventListener("resize", handleResize);40 handleResize();41 return () => window.removeEventListener("resize", handleResize);42 }, []);43 return windowSize;...

Full Screen

Full Screen

window-size-mixin.js

Source:window-size-mixin.js Github

copy

Full Screen

...8 mounted() {9 this.$nextTick(function() {10 window.addEventListener('resize', this.setWindowSize);11 window.addEventListener('resize', this.setWindowSize);12 this.setWindowSize();13 });14 },15 methods: {16 setWindowSize() {17 this.windowWidth = document.documentElement.clientWidth;18 this.windowHeight = document.documentElement.clientHeight;19 },20 },21 beforeDestroy() {22 window.removeEventListener('resize', this.setWindowSize);23 window.removeEventListener('resize', this.setWindowSize);24 },...

Full Screen

Full Screen

window-size.js

Source:window-size.js Github

copy

Full Screen

...8 mounted() {9 this.$nextTick(function() {10 window.addEventListener('resize', this.setWindowSize);11 window.addEventListener('resize', this.setWindowSize);12 this.setWindowSize();13 });14 },15 methods: {16 setWindowSize() {17 this.windowWidth = document.documentElement.clientWidth;18 this.windowHeight = document.documentElement.clientHeight;19 },20 },21 beforeDestroy() {22 window.removeEventListener('resize', this.setWindowSize);23 window.removeEventListener('resize', this.setWindowSize);24 },...

Full Screen

Full Screen

resizeScreenSize.spec.js

Source:resizeScreenSize.spec.js Github

copy

Full Screen

...5 setWindowSize: jest.fn(),6 };7 });8 it('should call setWindowSize on the browser object', () => {9 setWindowSize(1, 2);10 expect(global.browser.setWindowSize)11 .toHaveBeenCalledTimes(1);12 expect(global.browser.setWindowSize)13 .toHaveBeenCalledWith(1, 2);14 });...

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1describe('webdriver.io page', () => {2 it('should have the right title', () => {3 browser.setWindowSize(800, 600)4 const title = browser.getTitle()5 assert.strictEqual(title, 'WebdriverIO · Next-gen WebDriver test framework for Node.js')6 })7})

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1describe('webdriver.io page', () => {2 it('should have the right title', () => {3 browser.setWindowSize(1024, 768)4 expect(browser).toHaveTitle('WebdriverIO · Next-gen browser and mobile automation test framework for Node.js')5 })6})

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1browser.setWindowSize(1920, 1080);2browser.setWindowRect(0, 0, 1920, 1080);3browser.setWindowSize(1920, 1080);4browser.setWindowRect(0, 0, 1920, 1080);5browser.setWindowSize(1920, 1080);6browser.setWindowRect(0, 0, 1920, 1080);7browser.setWindowSize(1920, 1080);8browser.setWindowRect(0, 0, 1920, 1080);9browser.setWindowSize(1920, 1080);10browser.setWindowRect(0, 0, 1920, 1080);11browser.setWindowSize(1920, 1080);12browser.setWindowRect(0, 0, 1920, 1080);13browser.setWindowSize(1920, 1080);14browser.setWindowRect(0, 0, 1920, 1080);15browser.setWindowSize(1920, 1080);16browser.setWindowRect(0, 0, 1920, 1080);17browser.setWindowSize(1920, 1080);

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1browser.setWindowSize(1024, 768);2browser.setWindowRect(0, 0, 1024, 768);3browser.windowHandleMaximize();4browser.windowHandleSize({ width: 1024, height: 768 });5browser.windowHandlePosition({ x: 0, y: 0 });6browser.windowHandleFullscreen();7driver.manage().window().setSize(new Dimension(1024, 768));8driver.manage().window().setPosition(new Point(0, 0));9driver.manage().window().maximize();10driver.manage().window().fullscreen();11browser.manage().window().setSize(1024, 768);12browser.manage().window().setPosition(0, 0);13browser.manage().window().maximize();14browser.manage().window().fullscreen();15selenium.windowMaximize();16selenium.windowFocus();17selenium.windowMinimize();18selenium.windowMaximize();19selenium.windowFocus();

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1browser.setWindowSize(1024, 768);2browser.setWindowRect(1024, 768);3browser.setWindowRect(1024, 768, 0, 0);4browser.setWindowRect(1024, 768, 0, 0, 'maximize');5browser.setWindowRect(1024, 768, 0, 0, 'fullscreen');6browser.setWindowRect(1024, 768, 0, 0, 'minimize');7browser.setWindowRect(1024, 768, 0, 0, 'restore');8browser.setWindowRect(1024, 768, 0, 0, 'fullscreen');9browser.setWindowRect(1024, 768, 0, 0, 'fullscreen', 0);10browser.setWindowRect(1024, 768, 0, 0, 'fullscreen', 1);11browser.setWindowRect(1024, 768, 0, 0, 'fullscreen', 2);12browser.setWindowRect(1024, 768, 0, 0, 'fullscreen', 3);13browser.setWindowRect(1024, 768, 0, 0, 'fullscreen', 4);14browser.setWindowRect(1024, 768, 0, 0, 'fullscreen', 5);15browser.setWindowRect(1024, 768, 0, 0, 'fullscreen', 6);

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1browser.setWindowSize(1200, 800);2browser.setWindowRect(0, 0, 1200, 800);3browser.setWindowRect(x, y, width, height) method4browser.setWindowRect(0, 0, 1200, 800);5browser.maximizeWindow() method6browser.maximizeWindow();7browser.fullscreenWindow() method8browser.fullscreenWindow();9browser.getWindowSize() method10console.log(browser.getWindowSize());11browser.getWindowRect() method

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1describe('Test Case', function() {2 it('should set size of window', function () {3 browser.setWindowSize(1024, 768);4 browser.pause(5000);5 });6});

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1describe('test', () => {2 it('should set window size', () => {3 browser.setWindowSize(1000, 1000);4 });5});6describe('test', () => {7 it('should set window size', () => {8 browser.setWindowSize(1000, 1000);9 });10});

Full Screen

Full Screen

WebdriverIO Tutorial

Wondering what could be a next-gen browser and mobile test automation framework that is also simple and concise? Yes, that’s right, it's WebdriverIO. Since the setup is very easy to follow compared to Selenium testing configuration, you can configure the features manually thereby being the center of attraction for automation testing. Therefore the testers adopt WedriverIO to fulfill their needs of browser testing.

Learn to run automation testing with WebdriverIO tutorial. Go from a beginner to a professional automation test expert with LambdaTest WebdriverIO tutorial.

Chapters

  1. Running Your First Automation Script - Learn the steps involved to execute your first Test Automation Script using WebdriverIO since the setup is very easy to follow and the features can be configured manually.

  2. Selenium Automation With WebdriverIO - Read more about automation testing with WebdriverIO and how it supports both browsers and mobile devices.

  3. Browser Commands For Selenium Testing - Understand more about the barriers faced while working on your Selenium Automation Scripts in WebdriverIO, the ‘browser’ object and how to use them?

  4. Handling Alerts & Overlay In Selenium - Learn different types of alerts faced during automation, how to handle these alerts and pops and also overlay modal in WebdriverIO.

  5. How To Use Selenium Locators? - Understand how Webdriver uses selenium locators in a most unique way since having to choose web elements very carefully for script execution is very important to get stable test results.

  6. Deep Selectors In Selenium WebdriverIO - The most popular automation testing framework that is extensively adopted by all the testers at a global level is WebdriverIO. Learn how you can use Deep Selectors in Selenium WebdriverIO.

  7. Handling Dropdown In Selenium - Learn more about handling dropdowns and how it's important while performing automated browser testing.

  8. Automated Monkey Testing with Selenium & WebdriverIO - Understand how you can leverage the amazing quality of WebdriverIO along with selenium framework to automate monkey testing of your website or web applications.

  9. JavaScript Testing with Selenium and WebdriverIO - Speed up your Javascript testing with Selenium and WebdriverIO.

  10. Cross Browser Testing With WebdriverIO - Learn more with this step-by-step tutorial about WebdriverIO framework and how cross-browser testing is done with WebdriverIO.

Run Webdriverio automation tests on LambdaTest cloud grid

Perform automation testing on 3000+ real desktop and mobile devices online.

... View sample repo... View DocumentationSign up Free
›
_

Try LambdaTest Now !!

Get 100 minutes of automation test minutes FREE!!

...
Sign up with GoogleSign up with Email
Next-Gen App & Browser Testing Cloud

Was this article helpful?

Helpful

NotHelpful