Unlock 30% off on Manual Testing Annual Plans this Holiday Season.

Copied to Clipboard!

How to use setWindowSize method in Webdriverio

Best JavaScript code snippet using webdriverio-monorepo

DynamicSideContent.spec.js

Source:DynamicSideContent.spec.js

...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});

example.hermione.js

Source:example.hermione.js

...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    }...

commands.js

Source:commands.js

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  }...

useWindowSize.js

Source:useWindowSize.js

...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;...

window-size-mixin.js

Source:window-size-mixin.js

...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  },...

window-size.js

Source:window-size.js

...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  },...

resizeScreenSize.spec.js

Source:resizeScreenSize.spec.js

...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    });...

Using AI Code Generation

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})

Using AI Code Generation

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})

Using AI Code Generation

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);

Using AI Code Generation

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();

Using AI Code Generation

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);

Using AI Code Generation

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

Using AI Code Generation

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

Using AI Code Generation

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});

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

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.
Selenium Automation With WebdriverIO - Read more about automation testing with WebdriverIO and how it supports both browsers and mobile devices.
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?
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.
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.
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.
Handling Dropdown In Selenium - Learn more about handling dropdowns and how it's important while performing automated browser testing.
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.
JavaScript Testing with Selenium and WebdriverIO - Speed up your Javascript testing with Selenium and WebdriverIO.
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.