@digigov/cli-app 1.0.0-8ae63a77 → 1.0.0-8b33e4c8

package/.rush/temp/shrinkwrap-deps.json

@@ -125,7 +125,7 @@
   "bytes@3.1.0": "sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg==",
   "camelcase-css@2.0.1": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
   "caniuse-lite@1.0.30001375": "sha512-kWIMkNzLYxSvnjy0hL8w1NOaWNr2rn39RTAVyIwcw8juu60bZDWiF1/loOYANzjtJmy6qPgNmn38ro5Pygagdw==",
-  "caniuse-lite@1.0.30001550": "sha512-p82WjBYIypO0ukTsd/FG3Xxs+4tFeaY9pfT4amQL8KWtYH7H9nYwReGAbMTJ0hsmRO8IfDtsS6p3ZWj8+1c2RQ==",
+  "caniuse-lite@1.0.30001562": "sha512-kfte3Hym//51EdX4239i+Rmp20EsLIYGdPkERegTgU19hQWCRhsRFGKHTliUlsry53tv17K7n077Kqa0WJU4ng==",
   "chalk@2.4.2": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
   "chalk@4.0.0": "sha512-N9oWFcegS0sFr9oh1oz2d7Npos6vNoWW9HvtCg5N1KRFpUhaAhvTv5Y58g880fZaEYSNm3qDz8SU1UrGvp+n7A==",
   "chalk@4.1.2": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
@@ -178,7 +178,7 @@
   "domain-browser@1.2.0": "sha512-jnjyiM6eRyZl2H+W8Q/zLMA481hzi0eszAaBUzIVnmYVDBbnLxVNnfu1HgEBvCbL+71FrxMl3E6lpKH7Ge3OXA==",
   "ee-first@1.1.1": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==",
   "electron-to-chromium@1.4.215": "sha512-vqZxT8C5mlDZ//hQFhneHmOLnj1LhbzxV0+I1yqHV8SB1Oo4Y5Ne9+qQhwHl7O1s9s9cRuo2l5CoLEHdhMTwZg==",
-  "electron-to-chromium@1.4.557": "sha512-6x0zsxyMXpnMJnHrondrD3SuAeKcwij9S+83j2qHAQPXbGTDDfgImzzwgGlzrIcXbHQ42tkG4qA6U860cImNhw==",
+  "electron-to-chromium@1.4.582": "sha512-89o0MGoocwYbzqUUjc+VNpeOFSOK9nIdC5wY4N+PVUarUK0MtjyTjks75AZS2bW4Kl8MdewdFsWaH0jLy+JNoA==",
   "elliptic@6.5.4": "sha512-iLhC6ULemrljPZb+QutR5TQGB+pdW6KGD5RSegS+8sorOZT+rdQFbsQFJgvN3eRqNALqJer4oQ16YvJHlU8hzQ==",
   "emoji-regex@8.0.0": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
   "emojis-list@2.1.0": "sha512-knHEZMgs8BB+MInokmNTg/OyPlAddghe1YBgNwJBc5zsJi/uyIcXoSDsL/W9ymOsBoBGdPIHXYJ9+qKFwRwDng==",
@@ -204,7 +204,7 @@
   "express@4.17.1": "sha512-mHJ9O79RqluphRrcw2X/GTh3k9tVv8YcoyY4Kkh4WDMUYKRZUq0h1o0w2rrrxBqM7VoeUVqgb27xlEMXTnYt4g==",
   "fast-deep-equal@3.1.3": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
   "fast-glob@3.2.11": "sha512-xrO3+1bxSo3ZVHAnqzyuewYT6aMFHRAd4Kcs92MAonjwQZLsK9d0SF1IyQ3k5PoirxTW0Oe/RqFgMQ6TcNE5Ew==",
-  "fast-glob@3.3.1": "sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==",
+  "fast-glob@3.3.2": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==",
   "fast-json-stable-stringify@2.1.0": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
   "fastq@1.13.0": "sha512-YpkpUnK8od0o1hmeSc7UUs/eB/vIPWJYjKck2QKIzAf71Vm1AAQ3EbuZB3g2JIy+pg+ERD0vqI79KyZiB2e2Nw==",
   "file-loader@5.1.0_webpack@5.74.0": "sha512-u/VkLGskw3Ue59nyOwUwXI/6nuBCo7KBkniB/l7ICwr/7cPNGsL1WCXUp3GB0qgOOKU1TiP49bv4DZF/LJqprg==",
@@ -222,7 +222,7 @@
   "fs-extra@8.1.0": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==",
   "fs.realpath@1.0.0": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
   "fsevents@2.3.2": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
-  "function-bind@1.1.1": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
+  "function-bind@1.1.2": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
   "gensync@1.0.0-beta.2": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
   "get-caller-file@2.0.5": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
   "get-orientation@1.1.2": "sha512-/pViTfifW+gBbh/RnlFYHINvELT9Znt+SYyDKAUL6uV6By019AK/s+i9XP4jSwq7lwP38Fd8HVeTxym3+hkwmQ==",
@@ -238,9 +238,9 @@
   "graceful-fs@4.2.10": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==",
   "has-flag@3.0.0": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
   "has-flag@4.0.0": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-  "has@1.0.3": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
   "hash-base@3.1.0": "sha512-1nmYp/rhMDiE7AYkDw+lLwlAzz0AntGIe51F3RfFfEqyQ3feY2eI/NcwC6umIQVOASPMsWJLJScWKSSvzL9IVA==",
   "hash.js@1.1.7": "sha512-taOaskGt4z4SOANNseOviYDvjEJinIkRgmp7LbKP2YTTmVxWBl87s/uzK9r+44BclBSp2X7K1hqeNfz9JbBeXA==",
+  "hasown@2.0.0": "sha512-vUptKVTpIJhcczKBbgnS+RtcuYMB8+oNzPK2/Hp3hanz8JmpATdmmgLgSaadVREkDm+e2giHwY3ZRkyjSIDDFA==",
   "he@1.2.0": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
   "hmac-drbg@1.0.1": "sha512-Tti3gMqLdZfhOQY1Mzf/AanLiqh1WTiJgEj26ZuYQ9fbkLomzGchCws4FyrSd4VkpBfiNhaE1On+lOz894jvXg==",
   "http-errors@1.7.2": "sha512-uUQBt3H/cSIVfch6i1EuPNy/YsRSOUBXTVfZ+yR7Zjez3qjBz6i9+i4zjNaoqcoFVI4lQJ5plg63TvGfRSDCRg==",
@@ -260,7 +260,7 @@
   "inherits@2.0.4": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
   "ipaddr.js@1.9.1": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==",
   "is-binary-path@2.1.0": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
-  "is-core-module@2.13.0": "sha512-Z7dk6Qo8pOCp3l4tsX2C5ZVas4V+UxwQodwZhLopL91TX8UyyHEXafPcyoeeWuLrwzHcr3igO78wNLwHJHsMCQ==",
+  "is-core-module@2.13.1": "sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==",
   "is-docker@2.2.1": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==",
   "is-extglob@2.1.1": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
   "is-fullwidth-code-point@3.0.0": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
@@ -273,7 +273,7 @@
   "isobject@2.1.0": "sha512-+OUdGJlgjOBZDfxnDjYYG6zp487z0JGNQq3cYQYg5f5hKR+syHMsaztzGeml/4kGG55CSpKSpWTY+jYGgsHLgA==",
   "jest-worker@24.9.0": "sha512-51PE4haMSXcHohnSMdM42anbvZANYTqMrr52tVKPqqsPJMzoP6FYYDVqahX/HrAoKEKz3uUPzSvKs9A3qR4iVw==",
   "jest-worker@27.5.1": "sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==",
-  "jiti@1.20.0": "sha512-3TV69ZbrvV6U5DfQimop50jE9Dl6J8O1ja1dvBbMba/sZ3YBEQqJ2VZRoQPVnhlzjNtU1vaXRZVrVjU4qtm8yA==",
+  "jiti@1.21.0": "sha512-gFqAIbuKyyso/3G2qhiO2OM6shY6EPP/R0+mkDbyspxKazh8BXDC5FiFsUjlczgdNz/vfra0da2y+aHrusLG/Q==",
   "js-tokens@4.0.0": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
   "jsesc@2.5.2": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==",
   "json-parse-even-better-errors@2.3.1": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
@@ -321,7 +321,7 @@
   "ms@2.1.2": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
   "mz@2.7.0": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
   "nanoid@3.3.4": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==",
-  "nanoid@3.3.6": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==",
+  "nanoid@3.3.7": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
   "native-url@0.3.4": "sha512-6iM8R99ze45ivyH8vybJ7X0yekIcPf5GgLV5K0ENCbmRcaRIDoj37BC8iLEmaaBfqqb8enuZ5p0uhY+lVAbAcA==",
   "negotiator@0.6.3": "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==",
   "neo-async@2.6.2": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
@@ -518,7 +518,7 @@
   "xtend@4.0.2": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
   "y18n@5.0.8": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
   "yallist@4.0.0": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-  "yaml@2.3.3": "sha512-zw0VAJxgeZ6+++/su5AFoqBbZbrEakwu+X0M5HmcwUiBL7AzcuPKjj5we4xfQLp78LkEMpD0cOnUhmgOVy3KdQ==",
+  "yaml@2.3.4": "sha512-8aAvwVUSHpfEqTQ4w/KMlf3HcRdt50E5ODIQJBw1fQ5RL34xabzxtUlzTXVqc4rkZsPbvrXKWnABCD7kWSmocA==",
   "yargs-parser@21.1.1": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
   "yargs@17.7.2": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==",
   "yn@3.1.1": "sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==",

package/index.js

@@ -1,7 +1,7 @@
-const {flags} = require('@oclif/command')
+const { flags } = require('@oclif/command')
 const execa = require('execa')
 const fs = require('fs')
-const {resolveProject, makeConfig, DigigovCommand} = require('@digigov/cli/lib')
+const { resolveProject, makeConfig, DigigovCommand } = require('@digigov/cli/lib')
 const path = require('path');
 const yargs = require('yargs');
 const execConfig = { env: {}, stdio: 'inherit' }
@@ -12,14 +12,14 @@ module.exports = class App extends DigigovCommand {
   static examples = [
     `$ digigov app`,
   ]
-  dirname=__dirname
+  dirname = __dirname
   static load() { return App }
   script = 'next'
   async run() {
     const [command, ...args] = this.argv;
     let proc;
     const project = resolveProject();
-    switch(command){
+    switch (command) {
       case 'export':
         await this.exec('rimraf', ['out'])
         await this.exec(this.script, ['build'])
@@ -43,7 +43,7 @@ module.exports = class App extends DigigovCommand {
         proc = this.exec(this.script, [command, ...args], execConfig);
         break;
       case 'test':
-        const args = yargs
+        const test_args = yargs
           .option('init', {
             alias: 'i',
             describe: 'Initialize project with specified parameters'
@@ -56,19 +56,26 @@ module.exports = class App extends DigigovCommand {
           .option('pagesPath', {
             alias: 'p',
             describe: 'The directory where the pages are located relative to the project folder',
+            default: 'pages'
+          })
+          .option('screenSizes', {
+            alias: 's',
+            choices: ['xs', 'lg'],
+            describe: 'The screen sizes for viewport',
           })
           .help()
           .argv;
 
-        if (args.init) {
-          const { baseUrl, pagesPath } = args;
-          console.log(`Generating test files for pagesPath "${pagesPath}" with baseUrl "${baseUrl}"`);
+        if (test_args.init) {
+          const { baseUrl, pagesPath, screenSizes } = test_args;
+          console.log(`Generating test files for pagesPath "${pagesPath}" with baseUrl "${baseUrl}" for screen sizes "${screenSizes}"`);
           const projectFolder = process.cwd();
-          generatePagesTestFile(projectFolder, pagesPath, baseUrl);
+          generatePagesTestFile(projectFolder, pagesPath, baseUrl, screenSizes);
         } else {
-          console.log('Usage: digigov app test --init --baseUrl [baseUrl] --pagesPath [pagesPath]');
+          console.log('Usage: digigov app test --init --baseUrl [baseUrl] --pagesPath [pagesPath] --screenSizes [screenSizes]');
           console.log('baseUrl: the base url of the running project (default: http://localhost:3000)');
           console.log('pagesPath: the directory where the pages are located (default: pages, src/pages)');
+          console.log('screenSizes: the screen sizes for viewport (default: lg)');
         }
         break;
       default:

package/lib/test/init.js

@@ -4,53 +4,93 @@ const glob = require('glob');
 
 const FILE_EXTENSIONS = ['js', 'jsx', 'ts', 'tsx'];
 
-const appendTestFile = (fileRelativePath, baseUrl, testFile) => {
-  testFile += `\n\ttest('${fileRelativePath.replace('index', '')} page should match the screenshot', async () => {
-    await page.goto(\`\${baseUrl}${fileRelativePath.replace('index', '')}\`);
-    const screenshot = await page.screenshot();
-    expect(screenshot).toMatchSnapshot();
-  });\n`;
+const SCREEN_SIZES = {
+  'xs': { width: 375, height: 667, deviceScaleFactor: 1 },
+  'lg': { width: 1280, height: 720, deviceScaleFactor: 2 }
+}
+
+const appendTestFile = (fileRelativePath, testFile, screenSizes) => {
+  screenSizes.forEach((screenSize) => {
+    testFile += `\ntest('${fileRelativePath.replace('index', '')} screen-${screenSize}', async () => {
+      await page${screenSize.toUpperCase()}.goto(\`\${baseUrl}${fileRelativePath.replace('index', '')}\`);
+      await delay(SCREENSHOT_DELAY);
+      await page${screenSize.toUpperCase()}.waitForLoadState('domcontentloaded');
+      const screenshot = await page${screenSize.toUpperCase()}.screenshot({ fullPage: true });
+      expect(screenshot).toMatchSnapshot();
+    });\n`;
+  });
   return testFile;
 }
 
-const generatePagesTestFile = (projectFolder, pagesPath, baseUrl = 'http://localhost:3000', testFileName = 'index.spec.ts') => {
+const generateBrowserContexts = (screenSizes) => {
+  let viewportSizes = '';
+  screenSizes.forEach((screenSize) => {
+    viewportSizes += `\n// Create a context with "${screenSize}" screen size
+    const context${screenSize.toUpperCase()} = await browser.newContext({
+      viewport: { width: ${SCREEN_SIZES[screenSize].width}, height: ${SCREEN_SIZES[screenSize].height} },
+      deviceScaleFactor: ${SCREEN_SIZES[screenSize].deviceScaleFactor},
+    });\n`;
+  });
+  return viewportSizes;
+}
+
+const initializePages = (screenSizes) => {
+  let initializePages = '';
+  screenSizes.forEach((screenSize) => {
+    initializePages += `let page${screenSize.toUpperCase()};\n`;
+  });
+  return initializePages;
+}
+
+const generateNewPages = (screenSizes) => {
+  let newPages = '';
+  screenSizes.forEach((screenSize) => {
+    newPages += `page${screenSize.toUpperCase()} = await context${screenSize.toUpperCase()}.newPage();\n`;
+  });
+  return newPages;
+}
+
+const generatePagesTestFile = (projectFolder, pagesPath = 'pages', baseUrl = 'http://localhost:3000', testFileName = 'index.spec.ts', screenSizes=['xs', 'lg']) => {
   let pagesFullPath = '';
-  if (pagesPath) {
+  if (fs.existsSync(path.join(projectFolder, pagesPath))) {
     pagesFullPath = path.join(projectFolder, pagesPath);
   }
-  else {
-    if (fs.existsSync(path.join(projectFolder, 'pages'))) {
-      pagesFullPath = path.join(projectFolder, 'pages');
-    }
-    else if (fs.existsSync(path.join(projectFolder, 'src', 'pages'))) {
-      pagesFullPath = path.join(projectFolder, 'src/pages');
-    }
+  else if (fs.existsSync(path.join(projectFolder, 'src', pagesPath))) {
+    pagesFullPath = path.join(projectFolder, `src/${pagesPath}`);
   }
   let testFile = `import { test, expect } from '@playwright/test';
 import { chromium } from 'playwright';
 
 const baseUrl = '${baseUrl}';
+const SCREENSHOT_DELAY = 2000;
 
-test.describe('${projectFolder} /pages tests', () => {
+test.describe('/pages', () => {
   let browser;
-  let page;
+${initializePages(screenSizes)}
+
+  const delay = ms => new Promise(resolve => setTimeout(resolve, ms));
 
   test.beforeAll(async () => {
+    // Wait until yarn start is loaded
+    test.setTimeout(60000);
+    await delay(30000);
     browser = await chromium.launch();
-    page = await browser.newPage();
+    ${generateBrowserContexts(screenSizes)}
+${generateNewPages(screenSizes)}
   });
 
   test.afterAll(async () => {
     await browser.close();
   });
 `;
+
   const pagesPathRegex = new RegExp(`.*${pagesFullPath.replace('/', '\\/')}(.*)`);
   glob.sync(`${pagesFullPath}/**/*.@(${FILE_EXTENSIONS.join('|')})`).forEach((fileFullPath) => {
     const fileRelativePath = fileFullPath.replace(pagesPathRegex, '$1');
     const pageFileName = fileRelativePath.substring(fileRelativePath.lastIndexOf('/') + 1);
     // Check of the file starts with letter or digit
     if(/^[a-zA-Z0-9]/.test(pageFileName)) {
-      testFile = appendTestFile(fileRelativePath.replace(/\.[^/.]+$/, ''), baseUrl, testFile);
+      testFile = appendTestFile(fileRelativePath.replace(/\.[^/.]+$/, ''), testFile, screenSizes);
     }
   });
   testFile += '\n});';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digigov/cli-app",
-  "version": "1.0.0-8ae63a77",
+  "version": "1.0.0-8b33e4c8",
   "description": "@digigov developer cli tool",
   "main": "index.js",
   "author": "GRNET Developers <devs@lists.grnet.gr>",
@@ -10,7 +10,7 @@
     "express": "4.17.1",
     "http-proxy-middleware": "1.0.3",
     "next-images": "1.3.0",
-    "@digigov/cli-build": "1.0.0-8ae63a77",
+    "@digigov/cli-build": "1.0.0-8b33e4c8",
     "url-loader": "4.1.1",
     "next": "10.0.9",
     "publint": "0.1.8",
@@ -21,13 +21,13 @@
   "peerDependencies": {
     "rimraf": "3.0.2",
     "execa": "5.0.0",
-    "@digigov/cli": "1.0.0-8ae63a77",
+    "@digigov/cli": "1.0.0-8b33e4c8",
     "typescript": "4.2.3",
     "@types/node": "16.6.2",
     "@types/react": "16.9.56",
     "autoprefixer": "10.4.16",
     "postcss": "8.4.4",
-    "@digigov/css": "1.0.0-8ae63a77",
+    "@digigov/css": "1.0.0-8b33e4c8",
     "tailwindcss": "3.3.5"
   },
   "scripts": {