How to use setViewportSize method in Playwright Internal
Best JavaScript code snippet using playwright-internal
desktop.test.js
Source:desktop.test.js 
...56 });57 context('saveDocumentScreenshot', function () {58 it('with window size 480px', async function () {59 const screenPath = path.join(tmpDir, '/desktop-static-document-480', `${generateUUID()}.png`);60 await browser.setViewportSize({width: 480, height: 500});61 await browser.pause(500);62 await browser.saveDocumentScreenshot(screenPath);63 await compareImages(screenPath, screenStaticDocument480);64 });65 it('with window size 1600', async function () {66 const screenPath = path.join(tmpDir, '/desktop-static-document-1600', `${generateUUID()}.png`);67 await browser.setViewportSize({width: 1600, height: 500});68 await browser.pause(500);69 await browser.saveDocumentScreenshot(screenPath);70 await compareImages(screenPath, screenStaticDocument1600);71 });72 });73 context('saveElementScreenshot', function () {74 it('with window size 480px', async function () {75 const screenPath = path.join(tmpDir, '/desktop-static-element-footer', `${generateUUID()}.png`);76 await browser.setViewportSize({width: 480, height: 500});77 await browser.pause(500);78 await browser.saveElementScreenshot(screenPath, '.footer');79 await compareImages(screenPath, screenStaticElemenentFooter);80 });81 it('with window size 1600px', async function () {82 const screenPath = path.join(tmpDir, '/desktop-static-element-footer', `${generateUUID()}.png`);83 await browser.setViewportSize({width: 1600, height: 500});84 await browser.pause(500);85 await browser.saveElementScreenshot(screenPath, '.footer');86 await compareImages(screenPath, screenStaticElemenentFooter);87 });88 });89 context('saveViewportScreenshot', function () {90 it('with window size 480px', async function () {91 const screenPath = path.join(tmpDir, '/desktop-static-viewport-480', `${generateUUID()}.png`);92 await browser.setViewportSize({width: 480, height: 500});93 await browser.pause(500);94 await browser.saveViewportScreenshot(screenPath);95 await compareImages(screenPath, screenStaticViewport480);96 });97 it('with window size 1600', async function () {98 const screenPath = path.join(tmpDir, '/desktop-static-viewport-1600', `${generateUUID()}.png`);99 await browser.setViewportSize({width: 1600, height: 500});100 await browser.pause(500);101 await browser.saveViewportScreenshot(screenPath);102 await compareImages(screenPath, screenStaticViewport1600);103 });104 });105 });106 context('responsive sites - responsive.html', function () {107 beforeEach(async function () {108 await browser.url('responsive.html');109 await browser.pause(3000);110 });111 context('saveDocumentScreenshot', function () {112 it('with window size 480px', async function () {113 const screenPath = path.join(tmpDir, '/desktop-responsive-document-480', `${generateUUID()}.png`);114 await browser.setViewportSize({width: 480, height: 500});115 await browser.pause(500);116 await browser.saveDocumentScreenshot(screenPath);117 await compareImages(screenPath, screenResponsiveDocument480);118 });119 it('with window size 1600', async function () {120 const screenPath = path.join(tmpDir, '/desktop-responsive-document-1600', `${generateUUID()}.png`);121 await browser.setViewportSize({width: 1600, height: 500});122 await browser.pause(500);123 await browser.saveDocumentScreenshot(screenPath);124 await compareImages(screenPath, screenResponsiveDocument1600);125 });126 });127 context('saveElementScreenshot', function () {128 it('with window size 480px', async function () {129 const screenPath = path.join(tmpDir, '/desktop-responsive-element-footer-480', `${generateUUID()}.png`);130 await browser.setViewportSize({width: 480, height: 500});131 await browser.pause(500);132 await browser.saveElementScreenshot(screenPath, '.footer');133 await compareImages(screenPath, screenResponsiveElemenentFooter480);134 });135 it('with window size 1600px', async function () {136 const screenPath = path.join(tmpDir, '/desktop-responsive-element-footer-1600', `${generateUUID()}.png`);137 await browser.setViewportSize({width: 1600, height: 500});138 await browser.pause(500);139 await browser.saveElementScreenshot(screenPath, '.footer');140 await compareImages(screenPath, screenResponsiveElemenentFooter1600);141 });142 });143 context('saveViewportScreenshot', function () {144 it('with window size 480px', async function () {145 const screenPath = path.join(tmpDir, '/desktop-responsive-viewport-480', `${generateUUID()}.png`);146 await browser.setViewportSize({width: 480, height: 500});147 await browser.pause(500);148 await browser.saveViewportScreenshot(screenPath);149 await compareImages(screenPath, screenResponsiveViewport480);150 });151 it('with window size 1600', async function () {152 const screenPath = path.join(tmpDir, '/desktop-responsive-viewport-1600', `${generateUUID()}.png`);153 await browser.setViewportSize({width: 1600, height: 500});154 await browser.pause(500);155 await browser.saveViewportScreenshot(screenPath);156 await compareImages(screenPath, screenResponsiveViewport1600);157 });158 });159 });160 context('responsive sites with min-width - responsive-min-width.html', function () {161 beforeEach(async function () {162 await browser.url('responsive-min-width.html');163 await browser.pause(3000);164 });165 context('saveDocumentScreenshot', function () {166 it('with window size 480px', async function () {167 const screenPath = path.join(tmpDir, '/desktop-responsive-min-width-document-480', `${generateUUID()}.png`);168 await browser.setViewportSize({width: 480, height: 500});169 await browser.pause(500);170 await browser.saveDocumentScreenshot(screenPath);171 await compareImages(screenPath, screenResponsiveMinWidthDocument480);172 });173 it('with window size 1600', async function () {174 const screenPath = path.join(tmpDir, '/desktop-responsive-min-width-document-1600', `${generateUUID()}.png`);175 await browser.setViewportSize({width: 1600, height: 500});176 await browser.pause(500);177 await browser.saveDocumentScreenshot(screenPath);178 await compareImages(screenPath, screenResponsiveMinWidthDocument1600);179 });180 });181 context('saveElementScreenshot', function () {182 it('with window size 480px', async function () {183 const screenPath = path.join(tmpDir, '/desktop-responsive-min-width-element-footer-480', `${generateUUID()}.png`);184 await browser.setViewportSize({width: 480, height: 500});185 await browser.pause(500);186 await browser.saveElementScreenshot(screenPath, '.footer');187 await compareImages(screenPath, screenResponsiveMinWidthElemenentFooter);188 });189 it('with window size 1600px', async function () {190 const screenPath = path.join(tmpDir, '/desktop-responsive-min-width-element-footer-1600', `${generateUUID()}.png`);191 await browser.setViewportSize({width: 1600, height: 500});192 await browser.pause(500);193 await browser.saveElementScreenshot(screenPath, '.footer');194 await compareImages(screenPath, screenResponsiveMinWidthElemenentFooter);195 });196 });197 context('saveViewportScreenshot', function () {198 it('with window size 480px', async function () {199 const screenPath = path.join(tmpDir, '/desktop-responsive-min-width-viewport-480', `${generateUUID()}.png`);200 await browser.setViewportSize({width: 480, height: 500});201 await browser.pause(500);202 await browser.saveViewportScreenshot(screenPath);203 await compareImages(screenPath, screenResponsiveMinWidthViewport480);204 });205 it('with window size 1600', async function () {206 const screenPath = path.join(tmpDir, '/desktop-responsive-min-width-viewport-1600', `${generateUUID()}.png`);207 await browser.setViewportSize({width: 1600, height: 500});208 await browser.pause(500);209 await browser.saveViewportScreenshot(screenPath);210 await compareImages(screenPath, screenResponsiveMinWidthViewport1600);211 });212 });213 });214 context('dynamic size issues - size-dynamic.html', function () {215 beforeEach(async function () {216 await browser.url('size-dynamic.html');217 await browser.pause(3000);218 });219 context('saveDocumentScreenshot', function () {220 it('resizes elements properly', async function () {221 const screenPath = path.join(tmpDir, '/desktop-dynamic-size-document-480', `${generateUUID()}.png`);222 await browser.setViewportSize({width: 480, height: 500});223 await browser.pause(500);224 await browser.saveDocumentScreenshot(screenPath);225 await compareImages(screenPath, screenDynamicSizeDocument480);226 });227 });228 context('saveViewportScreenshot', function () {229 it('resizes elements properly', async function () {230 const screenPath = path.join(tmpDir, '/desktop-dynamic-size-viewport-480', `${generateUUID()}.png`);231 await browser.setViewportSize({width: 480, height: 500});232 await browser.pause(500);233 await browser.saveViewportScreenshot(screenPath);234 await compareImages(screenPath, screenDynamicSizeViewport480);235 });236 });237 context('saveElementScreenshot', function () {238 it('resizes elements properly', async function () {239 const screenPath = path.join(tmpDir, '/desktop-dynamic-size-element-480', `${generateUUID()}.png`);240 await browser.setViewportSize({width: 480, height: 500});241 await browser.pause(500);242 await browser.saveElementScreenshot(screenPath, '#dynamic-box');243 await compareImages(screenPath, screenDynamicSizeElement480);244 });245 });246 });247 context('overlay - overlay.html', function () {248 beforeEach(async function () {249 await browser.url('overlay.html');250 await browser.pause(3000);251 });252 context('saveDocumentScreenshot', function () {253 it('with window size 480px', async function () {254 const screenPath = path.join(tmpDir, '/desktop-overlay-document-480', `${generateUUID()}.png`);255 await browser.setViewportSize({width: 480, height: 500});256 await browser.pause(500);257 await browser.saveDocumentScreenshot(screenPath);258 await compareImages(screenPath, screenOverlayDocument480);259 });260 });261 context('saveViewportScreenshot', function () {262 it('with window size 480px', async function () {263 const screenPath = path.join(tmpDir, '/desktop-overlay-viewport-480', `${generateUUID()}.png`);264 await browser.setViewportSize({width: 480, height: 500});265 await browser.pause(500);266 await browser.saveViewportScreenshot(screenPath);267 await compareImages(screenPath, screenOverlayViewport480);268 });269 });270 context('saveElementScreenshot', function () {271 it('with window size 480px', async function () {272 const screenPath = path.join(tmpDir, '/desktop-overlay-element-480', `${generateUUID()}.png`);273 await browser.setViewportSize({width: 480, height: 500});274 await browser.pause(500);275 await browser.saveElementScreenshot(screenPath, '#overlay-content');276 await compareImages(screenPath, screenOverlayElement480);277 });278 });279 });280 context('fullpage modal - fullpage-modal.html', function () {281 beforeEach(async function () {282 await browser.url('fullpage-modal.html');283 await browser.pause(3000);284 });285 context('saveDocumentScreenshot', function () {286 it('with window size 480px', async function () {287 const screenPath = path.join(tmpDir, '/desktop-fullpage-modal-document-480', `${generateUUID()}.png`);288 await browser.setViewportSize({width: 480, height: 500});289 await browser.pause(500);290 await browser.saveDocumentScreenshot(screenPath);291 await compareImages(screenPath, screenFullpageModalDocument480);292 });293 });294 context('saveViewportScreenshot', function () {295 it('with window size 480px', async function () {296 const screenPath = path.join(tmpDir, '/desktop-fullpage-modal-viewport-480', `${generateUUID()}.png`);297 await browser.setViewportSize({width: 480, height: 500});298 await browser.pause(500);299 await browser.saveViewportScreenshot(screenPath);300 await compareImages(screenPath, screenFullpageModalViewport480);301 });302 });303 });304 context('element modifier - element-modifier.html', function () {305 beforeEach(async function () {306 await browser.url('element-modifier.html');307 await browser.pause(3000);308 await browser.setViewportSize({width: 480, height: 500});309 await browser.pause(500);310 });311 context('hide', function() {312 const options = {313 hide: ['.group', '.orange']314 };315 it('saveDocumentScreenshot', async function () {316 const screenPath = path.join(tmpDir, '/desktop-element-modifier-hide-document-480', `${generateUUID()}.png`);317 await browser.saveDocumentScreenshot(screenPath, options);318 await compareImages(screenPath, screenElementModifierHideDocument480);319 });320 it('saveViewportScreenshot', async function () {321 const screenPath = path.join(tmpDir, '/desktop-element-modifier-hide-viewport-480', `${generateUUID()}.png`);322 await browser.saveViewportScreenshot(screenPath, options);323 await compareImages(screenPath, screenElementModifierHideViewport480);324 });325 it('saveElementScreenshot', async function () {326 const screenPath = path.join(tmpDir, '/desktop-element-modifier-hide-element-480', `${generateUUID()}.png`);327 await browser.saveElementScreenshot(screenPath, '.wrapper', options);328 await compareImages(screenPath, screenElementModifierHideElement480);329 });330 });331 context('remove', function() {332 const options = {333 remove: ['.group', '.orange']334 };335 it('saveDocumentScreenshot', async function () {336 const screenPath = path.join(tmpDir, '/desktop-element-modifier-remove-document-480', `${generateUUID()}.png`);337 await browser.saveDocumentScreenshot(screenPath, options);338 await compareImages(screenPath, screenElementModifierRemoveDocument480);339 });340 it('saveViewportScreenshot', async function () {341 const screenPath = path.join(tmpDir, '/desktop-element-modifier-remove-viewport-480', `${generateUUID()}.png`);342 await browser.saveViewportScreenshot(screenPath, options);343 await compareImages(screenPath, screenElementModifierRemoveViewport480);344 });345 it('saveElementScreenshot', async function () {346 const screenPath = path.join(tmpDir, '/desktop-element-modifier-remove-element-480', `${generateUUID()}.png`);347 await browser.saveElementScreenshot(screenPath, '.wrapper', options);348 await compareImages(screenPath, screenElementModifierRemoveElement480);349 });350 });351 });352 // context.only('take screenshots', function () {353 // context('responsive sites - responsive.html', function () {354 // beforeEach(async function () {355 // await browser.url('responsive-min-width.html');356 // await browser.pause(3000);357 // });358 //359 // context('saveDocumentScreenshot', function () {360 // it('with window size 480px', async function () {361 // await browser.setViewportSize({width: 480, height: 500});362 // await browser.pause(500);363 // await browser.saveDocumentScreenshot(screenResponsiveMinWidthDocument480);364 // });365 //366 // it('with window size 1600', async function () {367 // await browser.setViewportSize({width: 1600, height: 500});368 // await browser.pause(500);369 // await browser.saveDocumentScreenshot(screenResponsiveMinWidthDocument1600);370 // });371 // });372 //373 // context('saveElementScreenshot', function () {374 // it('with window size 480px', async function () {375 // await browser.setViewportSize({width: 480, height: 500});376 // await browser.pause(500);377 // await browser.saveElementScreenshot(screenResponsiveMinWidthElemenentFooter, '.footer');378 // });379 //380 // });381 //382 // context('saveViewportScreenshot', function () {383 // it('with window size 480px', async function () {384 // await browser.setViewportSize({width: 480, height: 500});385 // await browser.pause(500);386 // await browser.saveViewportScreenshot(screenResponsiveMinWidthViewport480);387 // });388 //389 // it('with window size 1600', async function () {390 // await browser.setViewportSize({width: 1600, height: 500});391 // await browser.pause(500);392 // await browser.saveViewportScreenshot(screenResponsiveMinWidthViewport1600);393 // });394 // });395 // });396 //397 // context('responsive sites - responsive.html', function () {398 // beforeEach(async function () {399 // await browser.url('responsive.html');400 // await browser.pause(3000);401 // });402 //403 // context('saveDocumentScreenshot', function () {404 // it('with window size 480px', async function () {405 // await browser.setViewportSize({width: 480, height: 500});406 // await browser.pause(500);407 // await browser.saveDocumentScreenshot(screenResponsiveDocument480);408 // });409 //410 // it('with window size 1600', async function () {411 // await browser.setViewportSize({width: 1600, height: 500});412 // await browser.pause(500);413 // await browser.saveDocumentScreenshot(screenResponsiveDocument1600);414 // });415 // });416 //417 // context('saveElementScreenshot', function () {418 // it('with window size 480px', async function () {419 // await browser.setViewportSize({width: 480, height: 500});420 // await browser.pause(500);421 // await browser.saveElementScreenshot(screenResponsiveElemenentFooter480, '.footer');422 // });423 //424 // it('with window size 1600', async function () {425 // await browser.windowHandleSize({width: 1600, height: 500});426 // await browser.pause(500);427 // await browser.saveElementScreenshot(screenResponsiveElemenentFooter1600, '.footer');428 // });429 // });430 //431 // context('saveViewportScreenshot', function () {432 // it('with window size 480px', async function () {433 // await browser.setViewportSize({width: 480, height: 500});434 // await browser.pause(500);435 // await browser.saveViewportScreenshot(screenResponsiveViewport480);436 // });437 //438 // it('with window size 1600', async function () {439 // await browser.setViewportSize({width: 1600, height: 500});440 // await browser.pause(500);441 // await browser.saveViewportScreenshot(screenResponsiveViewport1600);442 // });443 // });444 // });445 //446 // context('static sites - static.html', function () {447 // context('saveDocumentScreenshot', function () {448 // it('with window size 480px', async function () {449 // await browser.setViewportSize({width: 480, height: 500});450 // await browser.pause(500);451 // await browser.url('static.html');452 // await browser.pause(3000);453 // await browser.saveDocumentScreenshot(screenStaticDocument480);454 // });455 //456 // it('with window size 1600', async function () {457 // await browser.setViewportSize({width: 1600, height: 500});458 // await browser.pause(500);459 // await browser.url('static.html');460 // await browser.pause(1000);461 // await browser.saveDocumentScreenshot(screenStaticDocument1600);462 // });463 // });464 //465 // context('saveElementScreenshot', function () {466 // it('with window size 480px', async function () {467 // await browser.setViewportSize({width: 480, height: 500});468 // await browser.pause(500);469 // await browser.url('static.html');470 // await browser.pause(3000);471 // await browser.saveElementScreenshot(screenStaticElemenentFooter, '.footer');472 // });473 //474 // });475 //476 // context('saveViewportScreenshot', function () {477 // it('with window size 480px', async function () {478 // await browser.setViewportSize({width: 480, height: 500});479 // await browser.pause(500);480 // await browser.url('static.html');481 // await browser.pause(3000);482 // await browser.saveViewportScreenshot(screenStaticViewport480);483 // });484 //485 // it('with window size 1600', async function () {486 // await browser.setViewportSize({width: 1600, height: 500});487 // await browser.pause(500);488 // await browser.url('static.html');489 // await browser.pause(1000);490 // await browser.saveViewportScreenshot(screenStaticViewport1600);491 // });492 // });493 // });494 //495 // context('dynamic size issues - size-dynamic.html', function () {496 // beforeEach(async function () {497 // await browser.url('size-dynamic.html');498 // await browser.pause(3000);499 //500 // });501 //502 // context('saveDocumentScreenshot', function () {503 // it('with window size 480px', async function () {504 // await browser.setViewportSize({width: 480, height: 500});505 // await browser.pause(500);506 // await browser.saveDocumentScreenshot(screenDynamicSizeDocument480);507 // });508 // });509 //510 // context('saveViewportScreenshot', function () {511 //512 // it('with window size 480px', async function () {513 // await browser.setViewportSize({width: 480, height: 500});514 // await browser.pause(500);515 // await browser.saveViewportScreenshot(screenDynamicSizeViewport480);516 // });517 // });518 // context('saveElementScreenshot', function () {519 //520 // it('with window size 480px', async function () {521 // await browser.setViewportSize({width: 480, height: 500});522 // await browser.pause(500);523 // await browser.saveElementScreenshot(screenDynamicSizeElement480, '#dynamic-box');524 // });525 // });526 // });527 //528 // context('overlay - overlay.html', function () {529 // beforeEach(async function () {530 // await browser.url('overlay.html');531 // await browser.pause(3000);532 //533 // });534 //535 // context('saveDocumentScreenshot', function () {536 // it('with window size 480px', async function () {537 // await browser.setViewportSize({width: 480, height: 500});538 // await browser.pause(500);539 // await browser.saveDocumentScreenshot(screenOverlayDocument480);540 // });541 // });542 //543 // context('saveViewportScreenshot', function () {544 //545 // it('with window size 480px', async function () {546 // await browser.setViewportSize({width: 480, height: 500});547 // await browser.pause(500);548 // await browser.saveViewportScreenshot(screenOverlayViewport480);549 // });550 // });551 // context('saveElementScreenshot', function () {552 //553 // it('with window size 480px', async function () {554 // await browser.setViewportSize({width: 480, height: 500});555 // await browser.pause(500);556 // await browser.saveElementScreenshot(screenOverlayElement480, '#overlay-content');557 // });558 // });559 // });560 //561 // context('fullpage modal - fullpage-modal.html', function () {562 // beforeEach(async function () {563 // await browser.url('fullpage-modal.html');564 // await browser.pause(3000);565 //566 // });567 //568 // context('saveDocumentScreenshot', function () {569 // it('with window size 480px', async function () {570 // await browser.setViewportSize({width: 480, height: 500});571 // await browser.pause(500);572 // await browser.saveDocumentScreenshot(screenFullpageModalDocument480);573 // });574 // });575 //576 // context('saveViewportScreenshot', function () {577 //578 // it('with window size 480px', async function () {579 // await browser.setViewportSize({width: 480, height: 500});580 // await browser.pause(500);581 // await browser.saveViewportScreenshot(screenFullpageModalViewport480);582 // });583 // });584 // });585 //586 // context('element modifier - element-modifier.html', function () {587 // beforeEach(async function () {588 // await browser.url('element-modifier.html');589 // await browser.pause(3000);590 // await browser.setViewportSize({width: 480, height: 500});591 // await browser.pause(500);592 // });593 //594 // context('hide', function() {595 // const options = {596 // hide: ['.group', '.orange']597 // };598 //599 // it('saveDocumentScreenshot', async function () {600 // await browser.saveDocumentScreenshot(screenElementModifierHideDocument480, options);601 // });602 //603 // it('saveViewportScreenshot', async function () {604 // await browser.saveViewportScreenshot(screenElementModifierHideViewport480, options);...
UsersManager_spec.js
Source:UsersManager_spec.js
...11 this.fixture = "Piwik\\Plugins\\UsersManager\\tests\\Fixtures\\ManyUsers";12 var url = "?module=UsersManager&action=index";13 it('should display the manage users page correctly', function (done) {14 expect.screenshot("load").to.be.captureSelector('.admin#content', function (page) {15 page.setViewportSize(1250);16 page.load(url);17 }, done);18 });19 it('should change the results page when next is clicked', function (done) {20 expect.screenshot("next_click").to.be.captureSelector('.admin#content', function (page) {21 page.setViewportSize(1250);22 page.click('.usersListPagination .btn.next');23 }, done);24 });25 it('should filter by username and access level when the inputs are filled', function (done) {26 expect.screenshot("filters").to.be.captureSelector('.admin#content', function (page) {27 page.setViewportSize(1250);28 page.sendKeys('#user-text-filter', 'ight');29 page.evaluate(function () {30 $('select[name=access-level-filter]').val('string:view').change();31 });32 }, done);33 });34 it('should display access for a different site when the roles for select is changed', function (done) {35 expect.screenshot("role_for").to.be.captureSelector('.admin#content', function (page) {36 page.setViewportSize(1250);37 // remove access filter38 page.evaluate(function () {39 $('select[name=access-level-filter]').val('string:').change();40 });41 page.click('th.role_header .siteSelector a.title');42 page.click('.siteSelector .custom_select_container a:contains(relentless)');43 }, done);44 });45 it('should select rows when individual row select is clicked', function (done) {46 expect.screenshot("rows_selected").to.be.captureSelector('.admin#content', function (page) {47 page.setViewportSize(1250);48 page.click('td.select-cell label:eq(0)');49 page.click('td.select-cell label:eq(3)');50 page.click('td.select-cell label:eq(8)');51 }, done);52 });53 it('should select all rows when all row select is clicked', function (done) {54 expect.screenshot("all_rows_selected").to.be.captureSelector('.admin#content', function (page) {55 page.setViewportSize(1250);56 page.click('th.select-cell label');57 }, done);58 });59 it('should select all rows in search when link in table is clicked', function (done) {60 expect.screenshot("all_rows_in_search").to.be.captureSelector('.admin#content', function (page) {61 page.setViewportSize(1250);62 page.click('.toggle-select-all-in-search');63 page.sendMouseEvent('mousemove', { x: 0, y: 0 });64 }, done);65 });66 it('should deselect all rows in search except for displayed rows when link in table is clicked again', function (done) {67 expect.screenshot("all_rows_selected").to.be.captureSelector('all_rows_in_search_deselected', '.admin#content', function (page) {68 page.setViewportSize(1250);69 page.click('.toggle-select-all-in-search');70 page.sendMouseEvent('mousemove', { x: 0, y: 0 });71 }, done);72 });73 it('should show bulk action confirm when bulk change access option used', function (done) {74 expect.screenshot("bulk_set_access_confirm").to.be.captureSelector('.change-user-role-confirm-modal', function (page) {75 page.setViewportSize(1250);76 // remove filters77 page.evaluate(function () {78 $('select[name=access-level-filter]').val('string:').change();79 });80 page.click('.toggle-select-all-in-search'); // reselect all in search81 page.click('.bulk-actions.btn');82 page.mouseMove('#user-list-bulk-actions>li:first');83 page.click('#bulk-set-access a:contains(Admin)');84 }, done);85 });86 it('should change access for all rows in search when confirmed', function (done) {87 expect.screenshot("bulk_set_access").to.be.captureSelector('.admin#content', function (page) {88 page.setViewportSize(1250);89 page.click('.change-user-role-confirm-modal .modal-close:not(.modal-no)');90 }, done);91 });92 it('should remove access to the currently selected site when the bulk remove access option is clicked', function (done) {93 expect.screenshot("bulk_remove_access").to.be.captureSelector('.admin#content', function (page) {94 page.setViewportSize(1250);95 page.click('th.select-cell label'); // select displayed rows96 page.click('.bulk-actions.btn');97 page.click('#user-list-bulk-actions a:contains(Remove Permissions)');98 page.click('.change-user-role-confirm-modal .modal-close:not(.modal-no)');99 }, done);100 });101 it('should go back to first page when previous button is clicked', function (done) {102 expect.screenshot("previous").to.be.captureSelector('.admin#content', function (page) {103 page.setViewportSize(1250);104 page.click('.usersListPagination .btn.prev');105 }, done);106 });107 it('should delete a single user when the modal is confirmed is clicked', function (done) {108 expect.screenshot("delete_single").to.be.captureSelector('.admin#content', function (page) {109 page.setViewportSize(1250);110 page.click('.deleteuser:eq(0)');111 page.click('.delete-user-confirm-modal .modal-close:not(.modal-no)');112 }, done);113 });114 it('should delete selected users when delete users bulk action is used', function (done) {115 expect.screenshot("delete_bulk_access").to.be.captureSelector('.admin#content', function (page) {116 page.setViewportSize(1250);117 page.click('th.select-cell label'); // select displayed rows118 page.click('.bulk-actions.btn');119 page.click('#user-list-bulk-actions a:contains(Delete Users)');120 page.click('.delete-user-confirm-modal .modal-close:not(.modal-no)');121 }, done);122 });123 it('should show the add new user form when the add new user button is clicked', function (done) {124 expect.screenshot("add_new_user_form").to.be.captureSelector('.admin#content', function (page) {125 page.setViewportSize(1250);126 page.click('.add-user-container .btn');127 }, done);128 });129 it('should create a user and show the edit user form when the create user button is clicked', function (done) {130 expect.screenshot("user_created").to.be.captureSelector('.admin#content', function (page) {131 page.setViewportSize(1250);132 page.sendKeys('#user_login', '000newuser');133 page.sendKeys('#user_password', 'thepassword');134 page.sendKeys('#user_email', 'theuser@email.com');135 page.click('piwik-user-edit-form .siteSelector a.title');136 page.click('piwik-user-edit-form .siteSelector .custom_select_container a:eq(1)');137 page.click('piwik-user-edit-form [piwik-save-button]');138 }, done);139 });140 it('should show the permissions edit when the permissions tab is clicked', function (done) {141 expect.screenshot("permissions_edit").to.be.captureSelector('.admin#content', function (page) {142 page.setViewportSize(1250);143 page.click('.userEditForm .menuPermissions');144 page.sendMouseEvent('mousemove', { x: 0, y: 0 });145 }, done);146 });147 it('should select all sites in search when in table link is clicked', function (done) {148 expect.screenshot("permissions_all_rows_in_search").to.be.captureSelector('.admin#content', function (page) {149 page.setViewportSize(1250);150 // remove filters151 page.evaluate(function () {152 $('div.site-filter>input').val('').change();153 $('.access-filter select').val('string:').change();154 });155 page.click('.userPermissionsEdit th.select-cell label');156 page.click('.userPermissionsEdit tr.select-all-row a');157 }, done);158 });159 it('should add access to all websites when bulk access is used on all websites in search', function (done) {160 expect.screenshot("permissions_all_sites_access").to.be.captureSelector('.admin#content', function (page) {161 page.setViewportSize(1250);162 page.click('.userPermissionsEdit .bulk-actions > .dropdown-trigger.btn');163 page.mouseMove('#user-permissions-edit-bulk-actions>li:first');164 page.click('#user-permissions-edit-bulk-actions a:contains(Write)');165 page.click('.change-access-confirm-modal .modal-close:not(.modal-no)');166 }, done);167 });168 it('should go to the next results page when the next button is clicked', function (done) {169 expect.screenshot("permissions_next").to.be.captureSelector('.admin#content', function (page) {170 page.setViewportSize(1250);171 page.click('.sites-for-permission-pagination a.next');172 }, done);173 });174 it('should remove access to a single site when the trash icon is used', function (done) {175 expect.screenshot("permissions_remove_single").to.be.captureSelector('.admin#content', function (page) {176 page.setViewportSize(1250);177 page.click('#sitesForPermission .deleteaccess');178 page.click('.delete-access-confirm-modal .modal-close:not(.modal-no)');179 }, done);180 });181 it('should select multiple rows when individual row selects are clicked', function (done) {182 expect.screenshot("permissions_select_multiple").to.be.captureSelector('.admin#content', function (page) {183 page.setViewportSize(1250);184 page.click('#sitesForPermission td.select-cell label:eq(0)');185 page.click('#sitesForPermission td.select-cell label:eq(3)');186 page.click('#sitesForPermission td.select-cell label:eq(8)');187 }, done);188 });189 it('should set access to selected sites when set bulk access is used', function (done) {190 expect.screenshot("permissions_bulk_access_set").to.be.captureSelector('.admin#content', function (page) {191 page.setViewportSize(1250);192 page.click('.userPermissionsEdit .bulk-actions > .dropdown-trigger.btn');193 page.mouseMove('#user-permissions-edit-bulk-actions>li:first');194 page.click('#user-permissions-edit-bulk-actions a:contains(Admin)');195 page.click('.change-access-confirm-modal .modal-close:not(.modal-no)');196 }, done);197 });198 it('should filter the permissions when the filters are used', function (done) {199 expect.screenshot("permissions_filters").to.be.captureSelector('.admin#content', function (page) {200 page.setViewportSize(1250);201 page.sendKeys('div.site-filter>input', 'nova');202 page.evaluate(function () {203 $('.access-filter select').val('string:admin').change();204 });205 }, done);206 });207 it('should select all displayed rows when the select all checkbox is clicked', function (done) {208 expect.screenshot("permissions_select_all").to.be.captureSelector('.admin#content', function (page) {209 page.setViewportSize(1250);210 page.click('.userPermissionsEdit th.select-cell label');211 }, done);212 });213 it('should set access to all sites selected when set bulk access is used', function (done) {214 expect.screenshot("permissions_bulk_access_set_all").to.be.captureSelector('.admin#content', function (page) {215 page.setViewportSize(1250);216 page.click('.userPermissionsEdit .bulk-actions > .dropdown-trigger.btn');217 page.mouseMove('#user-permissions-edit-bulk-actions>li:first');218 page.click('#user-permissions-edit-bulk-actions a:contains(View)');219 page.click('.change-access-confirm-modal .modal-close:not(.modal-no)');220 page.evaluate(function () { // remove filter221 $('.access-filter select').val('string:some').change();222 });223 }, done);224 });225 it('should set access to single site when select in table is used', function (done) {226 expect.screenshot("permissions_single_site_access").to.be.captureSelector('.admin#content', function (page) {227 page.setViewportSize(1250);228 page.evaluate(function () {229 $('.userPermissionsEdit tr select:eq(0)').val('string:admin').change();230 });231 page.click('.change-access-confirm-modal .modal-close:not(.modal-no)');232 }, done);233 });234 it('should remove access to displayed rows when remove bulk access is clicked', function (done) {235 expect.screenshot("permissions_remove_access").to.be.captureSelector('.admin#content', function (page) {236 page.setViewportSize(1250);237 // remove filters238 page.evaluate(function () {239 $('div.site-filter>input').val('').change();240 $('.access-filter select').val('string:').change();241 });242 page.click('.userPermissionsEdit th.select-cell label');243 page.click('.userPermissionsEdit tr.select-all-row a');244 page.click('.userPermissionsEdit .bulk-actions > .dropdown-trigger.btn');245 page.click('.userPermissionsEdit a:contains(Remove Permissions)');246 page.click('.delete-access-confirm-modal .modal-close:not(.modal-no)');247 }, done);248 });249 it('should display the superuser access tab when the superuser tab is clicked', function (done) {250 expect.screenshot("superuser_tab").to.be.captureSelector('.admin#content', function (page) {251 page.setViewportSize(1250);252 page.click('.userEditForm .menuSuperuser');253 page.sendMouseEvent('mousemove', { x: 0, y: 0 });254 }, done);255 });256 it('should show superuser confirm modal when the superuser toggle is clicked', function (done) {257 expect.screenshot("superuser_confirm").to.be.captureSelector('.superuser-confirm-modal', function (page) {258 page.setViewportSize(1250);259 page.click('.userEditForm #superuser_access+label');260 }, done);261 });262 it('should give the user superuser access when the superuser modal is confirmed', function (done) {263 expect.screenshot("superuser_set").to.be.captureSelector('.admin#content', function (page) {264 page.setViewportSize(1250);265 page.click('.superuser-confirm-modal .modal-close:not(.modal-no)');266 }, done);267 });268 it('should go back to the manage users page when the back link is clicked', function (done) {269 expect.screenshot("manage_users_back").to.be.captureSelector('.admin#content', function (page) {270 page.setViewportSize(1250);271 page.click('.userEditForm .entityCancelLink');272 page.evaluate(function () { // remove filter so new user shows273 $('#user-text-filter').val('').change();274 });275 }, done);276 });277 it('should show the edit user form when the edit icon in a row is clicked', function (done) {278 expect.screenshot("edit_user_form").to.be.captureSelector('.admin#content', function (page) {279 page.setViewportSize(1250);280 page.click('button.edituser:eq(0)');281 }, done);282 });283 // admin user tests284 describe('UsersManager_admin_view', function () {285 before(function () {286 var idSites = [];287 for (var i = 1; i !== 46; ++i) {288 idSites.push(i);289 }290 testEnvironment.idSitesAdminAccess = idSites;291 testEnvironment.save();292 });293 after(function () {294 delete testEnvironment.idSitesAdminAccess;295 testEnvironment.save();296 });297 it('should hide columns & functionality if an admin user views the manage user page', function (done) {298 expect.screenshot("admin_load").to.be.captureSelector('.admin#content', function (page) {299 page.setViewportSize(1250);300 page.load(url);301 }, done);302 });303 it('should show the add user form for admin users', function (done) {304 expect.screenshot("admin_add_user").to.be.captureSelector('.admin#content', function (page) {305 page.setViewportSize(1250);306 page.click('.add-user-container .btn');307 }, done);308 });309 it('should not allow editing basic info for admin users', function (done) {310 expect.screenshot("edit_user_basic_info").to.be.captureSelector('.admin#content', function (page) {311 page.setViewportSize(1250);312 page.evaluate(function () {313 $('.userEditForm .entityCancelLink').click();314 });315 page.click('button.edituser:eq(0)');316 }, done);317 });318 it('should allow editing user permissions for admin users', function (done) {319 expect.screenshot("admin_edit_permissions").to.be.captureSelector('.admin#content', function (page) {320 page.setViewportSize(1250);321 page.click('.userEditForm .menuPermissions');322 }, done);323 });324 it('should show the add existing user modal', function (done) {325 expect.screenshot("admin_existing_user_modal").to.be.captureSelector('.add-existing-user-modal', function (page) {326 page.setViewportSize(1250);327 page.evaluate(function () {328 $('.userEditForm .entityCancelLink').click();329 });330 page.click('.add-existing-user');331 }, done);332 });333 it('should add a user by email when an email is entered', function (done) {334 expect.screenshot("admin_add_user_by_email").to.be.captureSelector('.admin#content', function (page) {335 page.setViewportSize(1250);336 page.sendKeys('input[name=add-existing-user-email]', '0_login3conchords@example.com');337 page.click('.add-existing-user-modal .modal-close:not(.modal-no)');338 page.evaluate(function () { // show new user339 $('#user-text-filter').val('0_login3conchords@example.com').change();340 });341 }, done);342 });343 it('should add a user by username when a username is entered', function (done) {344 expect.screenshot("admin_add_user_by_login").to.be.captureSelector('.admin#content', function (page) {345 page.setViewportSize(1250);346 page.click('.add-existing-user');347 page.sendKeys('input[name=add-existing-user-email]', '10_login8');348 page.click('.add-existing-user-modal .modal-close:not(.modal-no)');349 page.evaluate(function () { // show new user350 $('#user-text-filter').val('10_login8').change();351 });352 }, done);353 });354 it('should fail if an email/username that does not exist is entered', function (done) {355 expect.screenshot("admin_add_user_not_exists").to.be.captureSelector('.admin#content', function (page) {356 page.setViewportSize(1250);357 page.click('.add-existing-user');358 page.sendKeys('input[name=add-existing-user-email]', 'sldkjfsdlkfjsdkl');359 page.click('.add-existing-user-modal .modal-close:not(.modal-no)');360 page.evaluate(function () { // show no user added361 $('#user-text-filter').val('sldkjfsdlkfjsdkl').change();362 });363 }, done);364 });365 });...
media-query-tracker-test.js
Source:media-query-tracker-test.js
...54 before(() => browser.url('/test/e2e/fixtures/autotrack.html'));55 beforeEach(() => {56 testId = uuid();57 log = bindLogAccessors(testId);58 browser.setViewportSize({width: 800, height: 600}, false);59 browser.execute(ga.run, 'create', DEFAULT_TRACKER_FIELDS);60 browser.execute(ga.logHitData, testId);61 });62 afterEach(() => {63 log.removeHits();64 browser.execute(ga.run, 'mediaQueryTracker:remove');65 browser.execute(ga.run, 'remove');66 });67 it('sets initial data via custom dimensions', () => {68 browser.execute(ga.run, 'require', 'mediaQueryTracker', opts);69 browser.execute(ga.run, 'send', 'pageview');70 browser.waitUntil(log.hitCountEquals(1));71 const hits = log.getHits();72 assert.strictEqual(hits[0].cd1, 'lg');73 assert.strictEqual(hits[0].cd2, 'md');74 });75 it('sends events when the matched media changes', () => {76 browser.execute(ga.run, 'require', 'mediaQueryTracker', opts);77 browser.setViewportSize({width: 400, height: 400}, false);78 browser.waitUntil(log.hitCountEquals(2));79 const hits = log.getHits();80 assert.strictEqual(hits[0].ec, 'Width');81 assert.strictEqual(hits[0].ea, 'change');82 assert.strictEqual(hits[0].el, 'lg => sm');83 assert.strictEqual(hits[1].ec, 'Height');84 assert.strictEqual(hits[1].ea, 'change');85 assert.strictEqual(hits[1].el, 'md => sm');86 });87 it('sends events as nonInteraction by default', () => {88 browser.execute(ga.run, 'require', 'mediaQueryTracker', opts);89 browser.setViewportSize({width: 400, height: 400}, false);90 browser.waitUntil(log.hitCountEquals(2));91 const hits = log.getHits();92 assert.strictEqual(hits[0].ec, 'Width');93 assert.strictEqual(hits[0].ea, 'change');94 assert.strictEqual(hits[0].el, 'lg => sm');95 assert.strictEqual(hits[0].ni, '1');96 assert.strictEqual(hits[1].ec, 'Height');97 assert.strictEqual(hits[1].ea, 'change');98 assert.strictEqual(hits[1].el, 'md => sm');99 assert.strictEqual(hits[1].ni, '1');100 });101 it('waits for the timeout send changes', () => {102 browser.execute(ga.run, 'require', 'mediaQueryTracker', opts);103 browser.setViewportSize({width: 400, height: 400}, false);104 const timeoutStart = Date.now();105 browser.waitUntil(log.hitCountEquals(2));106 const timeoutDuration = Date.now() - timeoutStart;107 assert(timeoutDuration >= TIMEOUT);108 });109 it('supports customizing the timeout period', () => {110 browser.execute(ga.run, 'require', 'mediaQueryTracker',111 Object.assign({}, opts, {changeTimeout: 0}));112 browser.setViewportSize({width: 400, height: 400}, false);113 const shortTimeoutStart = Date.now();114 browser.waitUntil(log.hitCountEquals(2));115 const shortTimeoutDuration = Date.now() - shortTimeoutStart;116 browser.execute(ga.run, 'mediaQueryTracker:remove');117 browser.execute(ga.run, 'remove');118 browser.execute(ga.run, 'create', DEFAULT_TRACKER_FIELDS);119 browser.execute(ga.logHitData, testId);120 browser.setViewportSize({width: 800, height: 600}, false);121 browser.execute(ga.run, 'require', 'mediaQueryTracker', opts);122 browser.setViewportSize({width: 400, height: 400}, false);123 const longTimeoutStart = Date.now();124 browser.waitUntil(log.hitCountEquals(4));125 const longTimeoutDuration = Date.now() - longTimeoutStart;126 // The long timeout should, in theory, be 1000ms longer, but we compare127 // to 500 just to be safe and avoid flakiness.128 assert(longTimeoutDuration - shortTimeoutDuration > (TIMEOUT/2));129 });130 it('supports customizing the change template', () => {131 browser.execute(requireMediaQueryTracker_changeTemplate);132 browser.setViewportSize({width: 400, height: 400}, false);133 browser.waitUntil(log.hitCountEquals(2));134 const hits = log.getHits();135 assert.strictEqual(hits[0].el, 'lg:sm');136 assert.strictEqual(hits[1].el, 'md:sm');137 });138 it('supports customizing any field via the fieldsObj', () => {139 browser.execute(ga.run, 'require', 'mediaQueryTracker',140 Object.assign({}, opts, {141 changeTimeout: 0,142 fieldsObj: {143 nonInteraction: false,144 },145 }));146 browser.setViewportSize({width: 400, height: 400}, false);147 browser.waitUntil(log.hitCountEquals(2));148 const hits = log.getHits();149 assert.strictEqual(hits[0].ec, 'Width');150 assert.strictEqual(hits[0].ea, 'change');151 assert.strictEqual(hits[0].el, 'lg => sm');152 assert.strictEqual(hits[0].ni, '0');153 assert.strictEqual(hits[1].ec, 'Height');154 assert.strictEqual(hits[1].ea, 'change');155 assert.strictEqual(hits[1].el, 'md => sm');156 assert.strictEqual(hits[1].ni, '0');157 });158 it('supports specifying a hit filter', () => {159 browser.execute(requireMediaQueryTracker_hitFilter);160 browser.setViewportSize({width: 400, height: 400}, false);161 browser.waitUntil(log.hitCountEquals(1));162 const hits = log.getHits();163 assert.strictEqual(hits[0].ec, 'Height');164 assert.strictEqual(hits[0].ea, 'change');165 assert.strictEqual(hits[0].el, 'md => sm');166 assert.strictEqual(hits[0].ni, '0');167 });168 it('includes usage params with all hits', () => {169 browser.execute(ga.run, 'require', 'mediaQueryTracker');170 browser.execute(ga.run, 'send', 'pageview');171 browser.waitUntil(log.hitCountEquals(1));172 const hits = log.getHits();173 assert.strictEqual(hits[0].did, constants.DEV_ID);174 assert.strictEqual(hits[0][constants.VERSION_PARAM], pkg.version);175 // '8' = '0000001000' in hex176 assert.strictEqual(hits[0][constants.USAGE_PARAM], '8');177 });178 describe('remove', () => {179 it('destroys all bound events and functionality', () => {180 browser.execute(ga.run, 'require', 'mediaQueryTracker',181 Object.assign({}, opts, {changeTimeout: 0}));182 browser.setViewportSize({width: 400, height: 400}, false);183 browser.waitUntil(log.hitCountEquals(2));184 const hits = log.getHits();185 assert.strictEqual(hits[0].ec, 'Width');186 assert.strictEqual(hits[1].ec, 'Height');187 log.removeHits();188 browser.execute(ga.run, 'mediaQueryTracker:remove');189 // This resize would trigger a change event190 // if the plugin hadn't been removed.191 browser.setViewportSize({width: 800, height: 600}, false);192 log.assertNoHitsReceived();193 });194 });195});196/**197 * Since function objects can't be passed via parameters from server to198 * client, this one-off function must be used to set the value for199 * `changeTemplate`.200 */201function requireMediaQueryTracker_changeTemplate() {202 ga('require', 'mediaQueryTracker', {203 definitions: [204 {205 name: 'Width',...
SidebarTests.js
Source:SidebarTests.js
...16 browser.timeouts('implicit', 5000)17 })18 const sidebarIsVisible = () => browser.isVisibleWithinViewport('body #sidebar')19 it('shows when viewport is wide enough before being toggled', async function () {20 await browser.setViewportSize({21 width: WIDE,22 height: 800,23 })24 await navigateTo('/')25 await loginIfNecessary()26 expect(await sidebarIsVisible()).to.be.true27 await browser.setViewportSize({28 width: WIDE - 1,29 height: 800,30 })31 await delay(300)32 expect(await sidebarIsVisible()).to.be.false33 await browser.setViewportSize({34 width: WIDE,35 height: 800,36 })37 await delay(300)38 expect(await sidebarIsVisible()).to.be.true39 })40 it('shows regardless of viewport size after being toggled', async function () {41 await browser.setViewportSize({42 width: WIDE - 1,43 height: 800,44 })45 await navigateTo('/')46 await loginIfNecessary()47 expect(await sidebarIsVisible()).to.be.false48 await browser.click('body #toggleSidebarButton')49 await delay(300)50 expect(await sidebarIsVisible()).to.be.true51 await browser.click('body #closeSidebarButton')52 await delay(300)53 expect(await sidebarIsVisible()).to.be.false54 })55 it('pushes over the content when viewport is wide', async function () {56 await browser.setViewportSize({57 width: WIDE,58 height: 800,59 })60 await navigateTo('/')61 await loginIfNecessary()62 expect(await browser.getLocation('body #body', 'x')).to.equal(theme.sidebar.width)63 await browser.click('body #closeSidebarButton')64 await delay(300)65 expect(await browser.getLocation('body #body', 'x')).to.equal(0)66 await browser.click('body #toggleSidebarButton')67 await delay(300)68 expect(await browser.getLocation('body #body', 'x')).to.equal(theme.sidebar.width)69 })70 it("pushes over content when viewport is narrow", async function () {71 await browser.setViewportSize({72 width: WIDE - 1,73 height: 800,74 })75 await navigateTo('/')76 await loginIfNecessary()77 expect(await browser.getLocation('body #body', 'x')).to.equal(0)78 await browser.click('body #toggleSidebarButton')79 await delay(300)80 expect(await browser.getLocation('body #body', 'x')).to.equal(theme.sidebar.width)81 await browser.click('body #closeSidebarButton')82 await delay(300)83 expect(await browser.getLocation('body #body', 'x')).to.equal(0)84 })85 describe("content", function () {86 before(async () => {87 await browser.setViewportSize({88 width: WIDE,89 height: 800,90 })91 await navigateTo('/')92 await loginIfNecessary()93 })94 it('contains proper headers', async function () {95 expect(await browser.getText('#sidebar h1')).to.equal('jcore.io')96 expect(await browser.getText('#sidebar h2')).to.equal('IRON PI')97 })98 it("shows a status item", async function () {99 expect(await browser.isVisible('#sidebar [data-test-title="Status"]')).to.be.true100 })101 it("shows a Local I/O item", async function () {102 browser.timeouts('implicit', 500)103 await browser.waitForVisible('#sidebar [data-test-title="Local I/O"]', 10000)104 })105 it('Local I/O item is collapsible', async function () {106 browser.timeouts('implicit', 500)107 await browser.waitForVisible('#sidebar [data-test-title="Local I/O"]', 10000)108 await browser.waitForVisible('#sidebar [data-component="List"][data-test-title="Local I/O"]', 10000)109 await browser.click('#sidebar [data-test-title="Local I/O"]')110 await delay(300)111 expect(await browser.isVisible('#sidebar [data-component="List"][data-test-title="Local I/O"]')).to.be.false112 await browser.click('#sidebar [data-test-title="Local I/O"]')113 await delay(300)114 expect(await browser.isVisible('#sidebar [data-component="List"][data-test-title="Local I/O"]')).to.be.true115 })116 it("shows Local I/O Channels", async function () {117 const query = `{118 Channels: LocalIOChannels {119 id120 name121 } 122 }`123 const {data: {Channels}} = await graphql({query, variables: null, operationName: null})124 browser.timeouts('implicit', 500)125 await browser.waitForVisible('#sidebar [data-component="List"][data-test-title="Local I/O"]', 10000)126 browser.timeouts('implicit', 5000)127 const displayedChannelIds = await getText('#sidebar [data-component="List"][data-test-title="Local I/O"] [data-component="ChannelStateItem"] [data-test-name="id"]')128 const displayedChannelNames = await getText('#sidebar [data-component="List"][data-test-title="Local I/O"] [data-component="ChannelStateItem"] [data-test-name="name"]')129 expect(displayedChannelIds).to.deep.equal(Channels.map(({id}) => String(id + 1)))130 expect(displayedChannelNames).to.deep.equal(Channels.map(({name}) => name || ''))131 })132 })133 })134 describe('when logged out', function () {135 beforeEach(async () => {136 await browser.setViewportSize({137 width: WIDE,138 height: 800,139 })140 await navigateTo('/')141 await logoutIfNecessary()142 browser.timeouts('implicit', 5000)143 expect(await browser.isVisible('body #openUserMenuButton')).to.be.false144 })145 it("doesn't show Local I/O channels", async function () {146 browser.timeouts('implicit', 500)147 expect(await browser.isVisible('#sidebar [data-component="List"][data-test-title="Local I/O"]')).to.be.false148 })149 })150})
setViewportSize.js
Source:setViewportSize.js
...18 describe('should throw an error if', () => {19 it('"size" argument is not an object', async () => {20 addSetViewportSize(browser);21 await assert.isRejected(22 browser.setViewportSize('string'),23 'number or type of arguments don\'t agree with "setViewportSize" command'24 );25 });26 it('"size.width" argument is not a number', async () => {27 addSetViewportSize(browser);28 await assert.isRejected(29 browser.setViewportSize({width: '100', height: 200}),30 'number or type of arguments don\'t agree with "setViewportSize" command'31 );32 });33 it('"size.height" argument is not a number', async () => {34 addSetViewportSize(browser);35 await assert.isRejected(36 browser.setViewportSize({width: 100, height: '200'}),37 'number or type of arguments don\'t agree with "setViewportSize" command'38 );39 });40 it('"type" argument is not a boolean', async () => {41 addSetViewportSize(browser);42 await assert.isRejected(43 browser.setViewportSize({width: 100, height: 200}, 'string'),44 'number or type of arguments don\'t agree with "setViewportSize" command'45 );46 });47 });48 it('should call "setWindowSize" if "type" passed as "false"', async () => {49 addSetViewportSize(browser);50 await browser.setViewportSize({width: 100, height: 200}, false);51 assert.calledOnceWithExactly(browser.setWindowSize, 100, 200);52 });53 describe('"type" argument passed as "true" (change viewport size)', () => {54 it('should get current window size and viewport size', async () => {55 browser.getWindowSize.resolves({width: 200, height: 200});56 browser.execute.withArgs(getViewportSizeScript)57 .onFirstCall().returns({width: 100, height: 100})58 .onSecondCall().returns({width: 50, height: 50});59 addSetViewportSize(browser);60 await browser.setViewportSize({width: 50, height: 50}, true);61 assert.calledOnceWithExactly(browser.getWindowSize);62 assert.calledWithExactly(browser.execute.firstCall, getViewportSizeScript);63 assert.calledWithExactly(browser.execute.secondCall, getViewportSizeScript);64 assert.calledTwice(browser.execute);65 });66 it('should set new window size increased by diff beetween previous window size and viewport', async () => {67 browser.getWindowSize.resolves({width: 200, height: 300});68 browser.execute.withArgs(getViewportSizeScript)69 .onFirstCall().returns({width: 100, height: 200})70 .onSecondCall().returns({width: 50, height: 100});71 addSetViewportSize(browser);72 await browser.setViewportSize({width: 50, height: 100}, true);73 assert.calledOnceWithExactly(browser.setWindowSize, 50 + (200 - 100), 100 + (300 - 200));74 });75 it('should try to set viewport size again if it does not changed at first time', async () => {76 browser.getWindowSize.resolves({width: 200, height: 300});77 browser.execute.withArgs(getViewportSizeScript)78 .onFirstCall().returns({width: 100, height: 200})79 .onSecondCall().returns({width: 100, height: 200})80 .onCall(2).returns({width: 100, height: 200})81 .onCall(3).returns({width: 50, height: 100});82 addSetViewportSize(browser);83 await browser.setViewportSize({width: 50, height: 100}, true);84 assert.calledTwice(browser.setWindowSize);85 assert.calledWithExactly(browser.setWindowSize.firstCall, 50 + (200 - 100), 100 + (300 - 200));86 assert.calledWithExactly(browser.setWindowSize.secondCall, 50 + (200 - 100), 100 + (300 - 200));87 });88 });...
nav.spec.js
Source:nav.spec.js
...5 cy.visit('/')6 })7 smallScreenSizes.forEach((size) => {8 it(`should not be visible on ${size} screen`, function () {9 cy.setViewportSize(size)10 cy.get('#nav').should('not.be.visible')11 })12 it(`should show open toggle and hide close toggle when nav is closed on ${size} screen`, function () {13 cy.setViewportSize(size)14 cy.get('#main-nav .toggle-open').should('be.visible')15 cy.get('#main-nav .toggle-close').should('not.be.visible')16 })17 it(`should hide open toggle and show close toggle when nav is open on ${size} screen`, function () {18 cy.setViewportSize(size)19 cy.get('#main-nav .toggle-nav').click()20 cy.get('#main-nav .toggle-open').should('not.be.visible')21 cy.get('#main-nav .toggle-close').should('be.visible')22 })23 })24 bigScreenSizes.forEach((size) => {25 it(`should be visible on ${size} screen`, function () {26 cy.setViewportSize(size)27 cy.get('#nav').should('be.visible')28 })29 })...
viewport.js
Source:viewport.js
1export function getViewport() {2 return window.innerHeight3}4export function setViewportSize( element ) {5 const viewportBlockSize = getViewport()6 element.style.blockSize = `${viewportBlockSize}px`7}8export function onViewportResize( callback) {9 10 window.addEventListener('resize', callback )11}12export function offViewportResize( callback ) {13 window.addEventListener('resize', callback )14}15export function viewportSize( element ) {16 setViewportSize( element ) 17 onViewportResize( () => setViewportSize( element ) )...
resize-body.js
Source:resize-body.js
1export function setViewportSize($el) {2 const ViewportBlockSize = getViewport()3 $el.style.blockSize = `${ViewportBlockSize}px`4}56export function getViewport() {7 return window.innerHeight8}910export function onViewportResize(callback) {11 window.addEventListener('resize', callback)12}1314export function offViewportResize(callback) {15 window.removeEventListener('resize', callback)16}1718export function viewportSize($el) {19 setViewportSize($el)2021 onViewportResize(() => setViewportSize($el))
...
Using AI Code Generation
1const { chromium } = require('playwright');2(async () => {3 const browser = await chromium.launch();4 const context = await browser.newContext();5 const page = await context.newPage();6 await page.setViewportSize({ width: 100, height: 100 });7 await page.screenshot({ path: `example.png` });8 await browser.close();9})();
Using AI Code Generation
1const playwright = require('playwright');2(async () => {3 const browser = await playwright['chromium'].launch();4 const context = await browser.newContext();5 const page = await context.newPage();6 await page.setViewportSize({width: 1920, height: 1080});7 await browser.close();8})();9const playwright = require('playwright');10(async () => {11 const browser = await playwright['chromium'].launch();12 const context = await browser.newContext();13 const page = await context.newPage();14 await page.setViewportSize({width: 1920, height: 1080});15 await browser.close();16})();17const playwright = require('playwright');18(async () => {19 const browser = await playwright['chromium'].launch();20 const context = await browser.newContext();21 const page = await context.newPage();22 await page.setViewportSize({width: 1920, height: 1080});23 await browser.close();24})();25const playwright = require('playwright');26(async () => {27 const browser = await playwright['chromium'].launch();28 const context = await browser.newContext();29 const page = await context.newPage();30 await page.setViewportSize({width: 1920, height: 1080});31 await browser.close();32})();33const playwright = require('playwright');34(async () => {35 const browser = await playwright['chromium'].launch();36 const context = await browser.newContext();37 const page = await context.newPage();38 await page.setViewportSize({width: 1920, height: 1080});39 await browser.close();40})();
Using AI Code Generation
1const playwright = require('playwright');2(async () => {3 const browser = await playwright['chromium'].launch();4 const context = await browser.newContext();5 const page = await context.newPage();6 await page.setViewportSize({width: 800, height: 600});7 await page.screenshot({path: 'example.png'});8 await browser.close();9})();10const playwright = require('playwright');11(async () => {12 const browser = await playwright['chromium'].launch();13 const context = await browser.newContext();14 const page = await context.newPage();15 await page.setViewportSize({width: 800, height: 600});16 await page.screenshot({path: 'example.png'});17 await browser.close();18})();19const playwright = require('playwright');20(async () => {21 const browser = await playwright['chromium'].launch();22 const context = await browser.newContext();23 const page = await context.newPage();24 await page.setViewportSize({width: 800, height: 600});25 await page.screenshot({path: 'example.png'});26 await browser.close();27})();28const playwright = require('playwright');29(async () => {30 const browser = await playwright['chromium'].launch();31 const context = await browser.newContext();32 const page = await context.newPage();33 await page.setViewportSize({width: 800, height: 600});34 await page.screenshot({path: 'example.png'});35 await browser.close();36})();37const playwright = require('playwright');38(async () => {39 const browser = await playwright['chromium'].launch();40 const context = await browser.newContext();41 const page = await context.newPage();42 await page.setViewportSize({width: 800, height: 600});
Using AI Code Generation
1const playwright = require('playwright');2(async () => {3 for (const browserType of BROWSER) {4 const browser = await playwright[browserType].launch({headless: false});5 const context = await browser.newContext();6 const page = await context.newPage();7 await page.setViewportSize({8 });9 await page.screenshot({ path: `${browserType}.png` });10 await browser.close();11 }12})();13const playwright = require('playwright');14(async () => {15 for (const browserType of BROWSER) {16 const browser = await playwright[browserType].launch({headless: false});17 const context = await browser.newContext({18 viewport: {19 }20 });21 const page = await context.newPage();22 await page.screenshot({ path: `${browserType}.png` });23 await browser.close();24 }25})();26const playwright = require('playwright');27(async () => {28 for (const browserType of BROWSER) {29 const browser = await playwright[browserType].launch({headless: false});30 const context = await browser.newContext({31 viewport: {32 }33 });34 const page = await context.newPage();35 await page.screenshot({ path: `${browserType}.png` });36 await browser.close();37 }38})();39const playwright = require('playwright');40(async () => {41 for (const browserType of BROWSER) {42 const browser = await playwright[browserType].launch({headless: false});43 const context = await browser.newContext({44 viewport: {45 }46 });47 const page = await context.newPage();48 await page.screenshot({ path: `${browserType}.png` });49 await browser.close();50 }
Using AI Code Generation
1const { chromium } = require('playwright');2(async () => {3 const browser = await chromium.launch({ headless: false });4 const context = await browser.newContext();5 const page = await context.newPage();6 await page.setViewportSize({ width: 1280, height: 800 });7 await page.screenshot({ path: `example.png` });8 await browser.close();9})();10const { chromium } = require('playwright');11(async () => {12 const browser = await chromium.launch({ headless: false });13 const context = await browser.newContext();14 const page = await context.newPage();15 await page.setViewportSize({ width: 1280, height: 800 });16 await page.screenshot({ path: `example.png` });17 await browser.close();18})();19const { chromium } = require('playwright');20(async () => {21 const browser = await chromium.launch({ headless: false });22 const context = await browser.newContext();23 const page = await context.newPage();24 await page.setViewportSize({ width: 1280, height: 800 });25 await page.screenshot({ path: `example.png` });26 await browser.close();27})();28const { chromium } = require('playwright');29(async () => {30 const browser = await chromium.launch({ headless: false });31 const context = await browser.newContext();32 const page = await context.newPage();33 await page.setViewportSize({ width: 1280, height: 800 });34 await page.screenshot({ path: `example.png` });35 await browser.close();36})();37const { chromium } = require('playwright');38(async () => {39 const browser = await chromium.launch({ headless: false });40 const context = await browser.newContext();41 const page = await context.newPage();
Using AI Code Generation
1const { chromium } = require('playwright');2(async () => {3 const browser = await chromium.launch();4 const context = await browser.newContext();5 const page = await context.newPage();6 await page.setViewportSize({7 });8 await page.screenshot({ path: `example.png` });9 await browser.close();10})();11const puppeteer = require('puppeteer');12(async () => {13 const browser = await puppeteer.launch();14 const page = await browser.newPage();15 await page._client.send('Emulation.clearDeviceMetricsOverride');16 await page.setViewport({17 });18 await page.screenshot({ path: `example.png` });19 await browser.close();20})();21const { Builder, By, Key, until } = require('selenium-webdriver');22const { Options } = require('selenium-webdriver/chrome');23const chrome = require('selenium-webdriver/chrome');24const path = require('chromedriver').path;25const driver = new Builder().forBrowser('chrome').build();26(async function example() {27 await driver.manage().window().setRect({ width: 1920, height: 1080 });28 await driver.takeScreenshot().then(function (image, err) {29 require('fs').writeFile('example.png', image, 'base64', function (err) {30 console.log(err);31 });32 });33 await driver.quit();34})();35const { remote } = require('webdriverio');36(async () => {37 const browser = await remote({38 capabilities: {39 }40 });41 await browser.setWindowSize(1920, 1080);42 await browser.saveScreenshot('example.png');43 await browser.deleteSession();44})();45const Nightmare = require('nightmare');46const nightmare = Nightmare({ show: true });47(async () => {
Using AI Code Generation
1const playwright = require('playwright');2(async () => {3 const browser = await playwright.chromium.launch();4 const context = await browser.newContext();5 const page = await context.newPage();6 await page.setViewportSize({ width: 1280, height: 720 });7 await page.screenshot({ path: 'screenshot.png' });8 await browser.close();9})();10const playwright = require('playwright');11(async () => {12 process.env.PWDEBUG = 1;13 const browser = await playwright.chromium.launch();14 const context = await browser.newContext();15 const page = await context.newPage();16 await page.setViewportSize({ width: 1280, height: 720 });17 await page.screenshot({ path: 'screenshot.png' });18 await browser.close();19})();20import * as playwright from 'playwright';21(async () => {22 process.env.PWDEBUG = '1';23 const browser = await playwright.chromium.launch();24 const context = await browser.newContext();25 const page = await context.newPage();26 await page.setViewportSize({ width: 1280, height: 720 });27 await page.screenshot({ path: 'screenshot.png' });28 await browser.close();29})();
Using AI Code Generation
1const playwright = require('playwright');2(async () => {3 for (const browserType of BROWSER) {4 const browser = await playwright[browserType].launch({headless: false});5 const context = await browser.newContext();6 const page = await context.newPage();7 await page.setViewportSize({ width: 1920, height: 1080 });8 await page.screenshot({ path: `example-${browserType}.png` });9 await browser.close();10 }11})();12const playwright = require('playwright');13(async () => {14 for (const browserType of BROWSER) {15 const browser = await playwright[browserType].launch({headless: false});16 const context = await browser.newContext();17 const page = await context.newPage();18 await page.setViewportSize({ width: 1920, height: 1080 });19 await page.screenshot({ path: `example-${browserType}.png` });20 await browser.close();21 }22})();23const playwright = require('playwright');24(async () => {25 for (const browserType of BROWSER) {26 const browser = await playwright[browserType].launch({headless: false});27 const context = await browser.newContext();28 const page = await context.newPage();29 await page.setViewportSize({ width: 1920, height: 1080 });30 await page.screenshot({ path: `example-${browserType}.png` });31 await browser.close();32 }33})();34const playwright = require('playwright');35(async () => {36 for (const browserType of BROWSER) {37 const browser = await playwright[browserType].launch({headless: false});38 const context = await browser.newContext();39 const page = await context.newPage();40 await page.setViewportSize({ width: 1920, height: 1080 });41 await page.screenshot({ path: `example-${
Using AI Code Generation
1const playwright = require("playwright");2(async () => {3 for (const browserType of BROWSER) {4 const browser = await playwright[browserType].launch({ headless: false });5 const context = await browser.newContext();6 const page = await context.newPage();7 page.setViewportSize({ width: 800, height: 600 });8 await browser.close();9 }10})();11const playwright = require("playwright");12(async () => {13 for (const browserType of BROWSER) {14 const browser = await playwright[browserType].launch({ headless: false });15 const context = await browser.newContext();16 const page = await context.newPage();17 page.setViewportSize({ width: 800, height: 600 });18 await browser.close();19 }20})();21const playwright = require("playwright");22(async () => {23 for (const browserType of BROWSER) {24 const browser = await playwright[browserType].launch({ headless: false });25 const context = await browser.newContext();26 const page = await context.newPage();27 page.setViewportSize({ width: 800, height: 600 });28 await browser.close();29 }30})();31const playwright = require("playwright");32(async () => {33 for (const browserType of BROWSER) {34 const browser = await playwright[browserType].launch({ headless: false });35 const context = await browser.newContext();36 const page = await context.newPage();37 page.setViewportSize({ width: 800, height: 600 });38 await browser.close();39 }40})();41const playwright = require("playwright");42(async () => {43 for (const browserType of BROWSER) {44 const browser = await playwright[browserType].launch({ headless: false });45 const context = await browser.newContext();
Using AI Code Generation
1const {chromium} = require('playwright');2(async () => {3 const browser = await chromium.launch();4 const page = await browser.newPage();5 const context = await page.context();6 const client = await context.newCDPSession(page);7 await client.send('Emulation.setDeviceMetricsOverride', {width: 100, height: 100, deviceScaleFactor: 1, mobile: false});8 await page.screenshot({path: 'google.png'});9 await browser.close();10})();11const {chromium} = require('playwright');12(async () => {13 const browser = await chromium.launch();14 const page = await browser.newPage();15 const context = await page.context();16 const client = await context.newCDPSession(page);17 await client.send('Emulation.setDeviceMetricsOverride', {width: 100, height: 100, deviceScaleFactor: 1, mobile: false});18 await page.screenshot({path: 'google.png'});19 await browser.close();20})();21const {chromium} = require('playwright');22(async () => {23 const browser = await chromium.launch();24 const page = await browser.newPage();25 const context = await page.context();26 const client = await context.newCDPSession(page);27 await client.send('Emulation.setDeviceMetricsOverride', {width: 100, height: 100, deviceScaleFactor: 1, mobile: false});28 await page.screenshot({path: 'google.png'});29 await browser.close();30})();31const {chromium} = require('playwright');32(async () => {33 const browser = await chromium.launch();34 const page = await browser.newPage();35 const context = await page.context();36 const client = await context.newCDPSession(page);37 await client.send('Emulation.setDeviceMetricsOverride', {width: 100, height: 100, deviceScaleFactor: 1, mobile: false});
Playwright tutorial
LambdaTest’s Playwright tutorial will give you a broader idea about the Playwright automation framework, its unique features, and use cases with examples to exceed your understanding of Playwright testing. This tutorial will give A to Z guidance, from installing the Playwright framework to some best practices and advanced concepts.
Chapters:
- What is Playwright : Playwright is comparatively new but has gained good popularity. Get to know some history of the Playwright with some interesting facts connected with it.
- How To Install Playwright : Learn in detail about what basic configuration and dependencies are required for installing Playwright and run a test. Get a step-by-step direction for installing the Playwright automation framework.
- Playwright Futuristic Features: Launched in 2020, Playwright gained huge popularity quickly because of some obliging features such as Playwright Test Generator and Inspector, Playwright Reporter, Playwright auto-waiting mechanism and etc. Read up on those features to master Playwright testing.
- What is Component Testing: Component testing in Playwright is a unique feature that allows a tester to test a single component of a web application without integrating them with other elements. Learn how to perform Component testing on the Playwright automation framework.
- Inputs And Buttons In Playwright: Every website has Input boxes and buttons; learn about testing inputs and buttons with different scenarios and examples.
- Functions and Selectors in Playwright: Learn how to launch the Chromium browser with Playwright. Also, gain a better understanding of some important functions like “BrowserContext,” which allows you to run multiple browser sessions, and “newPage” which interacts with a page.
- Handling Alerts and Dropdowns in Playwright : Playwright interact with different types of alerts and pop-ups, such as simple, confirmation, and prompt, and different types of dropdowns, such as single selector and multi-selector get your hands-on with handling alerts and dropdown in Playright testing.
- Playwright vs Puppeteer: Get to know about the difference between two testing frameworks and how they are different than one another, which browsers they support, and what features they provide.
- Run Playwright Tests on LambdaTest: Playwright testing with LambdaTest leverages test performance to the utmost. You can run multiple Playwright tests in Parallel with the LammbdaTest test cloud. Get a step-by-step guide to run your Playwright test on the LambdaTest platform.
- Playwright Python Tutorial: Playwright automation framework support all major languages such as Python, JavaScript, TypeScript, .NET and etc. However, there are various advantages to Python end-to-end testing with Playwright because of its versatile utility. Get the hang of Playwright python testing with this chapter.
- Playwright End To End Testing Tutorial: Get your hands on with Playwright end-to-end testing and learn to use some exciting features such as TraceViewer, Debugging, Networking, Component testing, Visual testing, and many more.
- Playwright Video Tutorial: Watch the video tutorials on Playwright testing from experts and get a consecutive in-depth explanation of Playwright automation testing.
Run Playwright Internal automation tests on LambdaTest cloud grid
Perform automation testing on 3000+ real desktop and mobile devices online.
Try LambdaTest Now !!
Get 100 minutes of automation test minutes FREE!!
Was this article helpful?
