codeceptjs 3.0.6 → 3.1.2

package/lib/helper/Playwright.js

@@ -19,6 +19,7 @@ const {
   screenshotOutputFolder,
   getNormalizedKeyAttributeValue,
   isModifierKey,
+  clearString,
 } = require('../utils');
 const {
   isColorProperty,
@@ -28,6 +29,7 @@ const ElementNotFound = require('./errors/ElementNotFound');
 const RemoteBrowserConnectionRefused = require('./errors/RemoteBrowserConnectionRefused');
 const Popup = require('./extras/Popup');
 const Console = require('./extras/Console');
+const findReact = require('./extras/React');
 
 let playwright;
 let perfTiming;
@@ -38,6 +40,7 @@ const consoleLogStore = new Console();
 const availableBrowsers = ['chromium', 'webkit', 'firefox', 'electron'];
 
 const { createValueEngine, createDisabledEngine } = require('./extras/PlaywrightPropEngine');
+
 /**
  * Uses [Playwright](https://github.com/microsoft/playwright) library to run tests inside:
  *
@@ -63,6 +66,8 @@ const { createValueEngine, createDisabledEngine } = require('./extras/Playwright
  * * `restart`: (optional, default: true) - restart browser between tests.
  * * `disableScreenshots`: (optional, default: false)  - don't save screenshot on failure.
  * * `emulate`: (optional, default: {}) launch browser in device emulation mode.
+ * * `video`: (optional, default: false) enables video recording for failed tests; videos are saved into `output/videos` folder
+ * * `trace`: (optional, default: false) record [tracing information](https://playwright.dev/docs/trace-viewer) with screenshots and snapshots.
  * * `fullPageScreenshots` (optional, default: false) - make full page screenshots on failure.
  * * `uniqueScreenshotNames`: (optional, default: false)  - option to prevent screenshot override if you have scenarios with the same name in different suites.
  * * `keepBrowserState`: (optional, default: false) - keep browser state between tests when `restart` is set to false.
@@ -79,6 +84,22 @@ const { createValueEngine, createDisabledEngine } = require('./extras/Playwright
  * * `chromium`: (optional) pass additional chromium options
  * * `electron`: (optional) pass additional electron options
  *
+ * #### Video Recording Customization
+ *
+ * By default, video is saved to `output/video` dir. You can customize this path by passing `dir` option to `recordVideo` option.
+ *
+ * * `video`: enables video recording for failed tests; videos are saved into `output/videos` folder
+ * * `keepVideoForPassedTests`: - save videos for passed tests
+ * * `recordVideo`: [additional options for videos customization](https://playwright.dev/docs/next/api/class-browser#browser-new-context)
+ *
+ * #### Trace Recording Customization
+ *
+ * Trace recording provides a complete information on test execution and includes DOM snapshots, screenshots, and network requests logged during run.
+ * Traces will be saved to `output/trace`
+ *
+ * * `trace`: enables trace recording for failed tests; trace are saved into `output/trace` folder
+ * * `keepTraceForPassedTests`: - save trace for passed tests
+ *
  * #### Example #1: Wait for 0 network connections.
  *
  * ```js
@@ -130,7 +151,7 @@ const { createValueEngine, createDisabledEngine } = require('./extras/Playwright
  *      Playwright: {
  *        url: "http://localhost",
  *        chromium: {
- *          browserWSEndpoint: { wsEndpoint: 'ws://localhost:9222/devtools/browser/c5aa6160-b5bc-4d53-bb49-6ecb36cd2e0a' }
+ *          browserWSEndpoint: 'ws://localhost:9222/devtools/browser/c5aa6160-b5bc-4d53-bb49-6ecb36cd2e0a'
  *        }
  *      }
  *    }
@@ -210,6 +231,7 @@ class Playwright extends Helper {
     this.activeSessionName = '';
     this.isElectron = false;
     this.electronSessions = [];
+    this.storageState = null;
 
     // override defaults with config
     this._setConfig(config);
@@ -219,7 +241,6 @@ class Playwright extends Helper {
     const defaults = {
       // options to emulate context
       emulate: {},
-
       browser: 'chromium',
       waitForAction: 100,
       waitForTimeout: 1000,
@@ -248,10 +269,16 @@ class Playwright extends Helper {
   }
 
   _getOptionsForBrowser(config) {
-    return config[config.browser] ? {
-      ...config[config.browser],
-      wsEndpoint: config[config.browser].browserWSEndpoint,
-    } : {};
+    if (config[config.browser]) {
+      if (config[config.browser].browserWSEndpoint && config[config.browser].browserWSEndpoint.wsEndpoint) {
+        config[config.browser].browserWSEndpoint = config[config.browser].browserWSEndpoint.wsEndpoint;
+      }
+      return {
+        ...config[config.browser],
+        wsEndpoint: config[config.browser].browserWSEndpoint,
+      };
+    }
+    return {};
   }
 
   _setConfig(config) {
@@ -260,6 +287,12 @@ class Playwright extends Helper {
       headless: !this.options.show,
       ...this._getOptionsForBrowser(config),
     };
+    if (this.options.video) {
+      this.options.recordVideo = { size: parseWindowSize(this.options.windowSize) };
+    }
+    if (this.options.recordVideo && !this.options.recordVideo.dir) {
+      this.options.recordVideo.dir = `${global.output_dir}/videos/`;
+    }
     this.isRemoteBrowser = !!this.playwrightOptions.browserWSEndpoint;
     this.isElectron = this.options.browser === 'electron';
     this.userDataDir = this.playwrightOptions.userDataDir;
@@ -318,8 +351,37 @@ class Playwright extends Helper {
         return err.message.includes('context');
       },
     });
-    if (this.options.restart && !this.options.manualStart) return this._startBrowser();
-    if (!this.isRunning && !this.options.manualStart) return this._startBrowser();
+    if (this.options.restart && !this.options.manualStart) await this._startBrowser();
+    if (!this.isRunning && !this.options.manualStart) await this._startBrowser();
+
+    if (this.isElectron) {
+      this.browserContext = this.browser.context();
+    } else if (this.userDataDir) {
+      this.browserContext = this.browser;
+    } else {
+      const contextOptions = {
+        ignoreHTTPSErrors: this.options.ignoreHTTPSErrors,
+        acceptDownloads: true,
+        ...this.options.emulate,
+      };
+      if (this.options.recordVideo) contextOptions.recordVideo = this.options.recordVideo;
+      if (this.storageState) contextOptions.storageState = this.storageState;
+      this.browserContext = await this.browser.newContext(contextOptions); // Adding the HTTPSError ignore in the context so that we can ignore those errors
+    }
+
+    let mainPage;
+    if (this.isElectron) {
+      mainPage = await this.browser.firstWindow();
+    } else {
+      const existingPages = await this.browserContext.pages();
+      mainPage = existingPages[0] || await this.browserContext.newPage();
+    }
+    targetCreatedHandler.call(this, mainPage);
+
+    await this._setPage(mainPage);
+
+    if (this.options.trace) await this.browserContext.tracing.start({ screenshots: true, snapshots: true });
+
     return this.browser;
   }
 
@@ -332,43 +394,24 @@ class Playwright extends Helper {
       return;
     }
 
+    if (this.options.restart) {
+      this.isRunning = false;
+      return this._stopBrowser();
+    }
+
     // close other sessions
     try {
       const contexts = await this.browser.contexts();
-      contexts.shift();
+      const currentContext = contexts[0];
+      if (currentContext && (this.options.keepCookies || this.options.keepBrowserState)) {
+        this.storageState = await currentContext.storageState();
+      }
 
       await Promise.all(contexts.map(c => c.close()));
     } catch (e) {
       console.log(e);
     }
 
-    if (this.options.restart) {
-      this.isRunning = false;
-      return this._stopBrowser();
-    }
-
-    // ensure current page is in default context
-    if (this.page) {
-      const existingPages = await this.browserContext.pages();
-      await this._setPage(existingPages[0]);
-    }
-
-    if (this.options.keepBrowserState) return;
-
-    if (!this.options.keepCookies) {
-      this.debugSection('Session', 'cleaning cookies and localStorage');
-      await this.clearCookie();
-    }
-    const currentUrl = await this.grabCurrentUrl();
-
-    if (currentUrl.startsWith('http')) {
-      await this.executeScript('localStorage.clear();').catch((err) => {
-        if (!(err.message.indexOf("Storage is disabled inside 'data:' URLs.") > -1)) throw err;
-      });
-      await this.executeScript('sessionStorage.clear();').catch((err) => {
-        if (!(err.message.indexOf("Storage is disabled inside 'data:' URLs.") > -1)) throw err;
-      });
-    }
     // await this.closeOtherTabs();
     return this.browser;
   }
@@ -515,6 +558,7 @@ class Playwright extends Helper {
     if (!page) return;
     page.setDefaultNavigationTimeout(this.options.getPageTimeout);
     this.context = await this.page;
+    this.contextLocator = null;
     if (this.config.browser === 'chrome') {
       await page.bringToFront();
     }
@@ -531,6 +575,7 @@ class Playwright extends Helper {
     if (!page) {
       return;
     }
+    page.removeAllListeners('dialog');
     page.on('dialog', async (dialog) => {
       popupStore.popup = dialog;
       const action = popupStore.actionType || this.options.defaultPopupAction;
@@ -577,7 +622,7 @@ class Playwright extends Helper {
       this.browser = await playwright._electron.launch(this.playwrightOptions);
     } else if (this.isRemoteBrowser) {
       try {
-        this.browser = await playwright[this.options.browser].connect(this.playwrightOptions.browserWSEndpoint);
+        this.browser = await playwright[this.options.browser].connect(this.playwrightOptions);
       } catch (err) {
         if (err.toString().indexOf('ECONNREFUSED')) {
           throw new RemoteBrowserConnectionRefused(err);
@@ -595,26 +640,6 @@ class Playwright extends Helper {
       this.debugSection('Url', target.url());
     });
 
-    if (this.isElectron) {
-      this.browserContext = this.browser.context();
-    } else if (this.userDataDir) {
-      this.browserContext = this.browser;
-    } else {
-      this.browserContext = await this.browser.newContext({ ignoreHTTPSErrors: this.options.ignoreHTTPSErrors, acceptDownloads: true, ...this.options.emulate });// Adding the HTTPSError ignore in the context so that we can ignore those errors
-    }
-
-    let mainPage;
-    if (this.isElectron) {
-      mainPage = await this.browser.firstWindow();
-    } else {
-      const existingPages = await this.browserContext.pages();
-      mainPage = existingPages[0] || await this.browserContext.newPage();
-    }
-    targetCreatedHandler.call(this, mainPage);
-
-    await this._setPage(mainPage);
-    await this.closeOtherTabs();
-
     this.isRunning = true;
   }
 
@@ -656,6 +681,7 @@ class Playwright extends Helper {
     const els = await this._locate(locator);
     assertElementExists(els, locator);
     this.context = els[0];
+    this.contextLocator = locator;
 
     this.withinLocator = new Locator(locator);
   }
@@ -663,6 +689,7 @@ class Playwright extends Helper {
   async _withinEnd() {
     this.withinLocator = null;
     this.context = await this.page;
+    this.contextLocator = null;
   }
 
   _extractDataFromPerformanceTiming(timing, ...dataNames) {
@@ -1046,7 +1073,7 @@ class Playwright extends Helper {
    */
   async seeElement(locator) {
     let els = await this._locate(locator);
-    els = await Promise.all(els.map(el => el.boundingBox()));
+    els = await Promise.all(els.map(el => el.isVisible()));
     return empty('visible elements').negate(els.filter(v => v).fill('ELEMENT'));
   }
 
@@ -1056,7 +1083,7 @@ class Playwright extends Helper {
    */
   async dontSeeElement(locator) {
     let els = await this._locate(locator);
-    els = await Promise.all(els.map(el => el.boundingBox()));
+    els = await Promise.all(els.map(el => el.isVisible()));
     return empty('visible elements').assert(els.filter(v => v).fill('ELEMENT'));
   }
 
@@ -1360,7 +1387,7 @@ class Playwright extends Helper {
    */
   async grabNumberOfVisibleElements(locator) {
     let els = await this._locate(locator);
-    els = await Promise.all(els.map(el => el.boundingBox()));
+    els = await Promise.all(els.map(el => el.isVisible()));
     return els.filter(v => v).length;
   }
 
@@ -1527,6 +1554,7 @@ class Playwright extends Helper {
   async clearCookie() {
     // Playwright currently doesn't support to delete a certain cookie
     // https://github.com/microsoft/playwright/blob/master/docs/api.md#class-browsercontext
+    if (!this.browserContext) return;
     return this.browserContext.clearCookies();
   }
 
@@ -1562,15 +1590,32 @@ class Playwright extends Helper {
     return context.evaluate.apply(context, [fn, arg]);
   }
 
+  /**
+   * Grab Locator if called within Context
+   *
+   * @param {*} locator
+   */
+  _contextLocator(locator) {
+    locator = buildLocatorString(new Locator(locator, 'css'));
+
+    if (this.contextLocator) {
+      const contextLocator = buildLocatorString(new Locator(this.contextLocator, 'css'));
+      locator = `${contextLocator} >> ${locator}`;
+    }
+
+    return locator;
+  }
+
   /**
    * {{> grabTextFrom }}
    *
    */
   async grabTextFrom(locator) {
-    const texts = await this.grabTextFromAll(locator);
-    assertElementExists(texts, locator);
-    this.debugSection('Text', texts[0]);
-    return texts[0];
+    locator = this._contextLocator(locator);
+    const text = await this.page.textContent(locator);
+    assertElementExists(text, locator);
+    this.debugSection('Text', text);
+    return text;
   }
 
   /**
@@ -1804,8 +1849,37 @@ class Playwright extends Helper {
     return this.page.screenshot({ path: outputFile, fullPage: fullPageOption, type: 'png' });
   }
 
-  async _failed() {
+  async _failed(test) {
     await this._withinEnd();
+    if (this.options.recordVideo && this.page.video()) {
+      test.artifacts.video = await this.page.video().path();
+    }
+
+    if (this.options.trace) {
+      const path = `${global.output_dir}/trace/${clearString(test.title).slice(0, 255)}.zip`;
+      await this.browserContext.tracing.stop({ path });
+      test.artifacts.trace = path;
+    }
+  }
+
+  async _passed(test) {
+    if (this.options.recordVideo && this.page.video()) {
+      if (this.options.keepVideoForPassedTests) {
+        test.artifacts.video = await this.page.video().path();
+      } else {
+        this.page.video().delete().catch(e => {});
+      }
+    }
+
+    if (this.options.trace) {
+      if (this.options.keepTraceForPassedTests) {
+        const path = `${global.output_dir}/trace/${clearString(test.title)}.zip`;
+        await this.browserContext.tracing.stop({ path });
+        test.artifacts.trace = path;
+      } else {
+        await this.browserContext.tracing.stop();
+      }
+    }
   }
 
   /**
@@ -2093,6 +2167,7 @@ class Playwright extends Helper {
 
       if (locator >= 0 && locator < childFrames.length) {
         this.context = childFrames[locator];
+        this.contextLocator = locator;
       } else {
         throw new Error('Element #invalidIframeSelector was not found by text|CSS|XPath');
       }
@@ -2100,6 +2175,7 @@ class Playwright extends Helper {
     }
     if (!locator) {
       this.context = this.page;
+      this.contextLocator = null;
       return;
     }
 
@@ -2110,8 +2186,10 @@ class Playwright extends Helper {
 
     if (contentFrame) {
       this.context = contentFrame;
+      this.contextLocator = null;
     } else {
       this.context = els[0];
+      this.contextLocator = locator;
     }
   }
 
@@ -2209,6 +2287,39 @@ class Playwright extends Helper {
     if (prop) return rect[prop];
     return rect;
   }
+
+  /**
+  * Mocks network request using [`browserContext.route`](https://playwright.dev/docs/api/class-browsercontext#browser-context-route) of Playwright
+  *
+  * ```js
+  * I.mockRoute(/(\.png$)|(\.jpg$)/, route => route.abort());
+  * ```
+  * This method allows intercepting and mocking requests & responses. [Learn more about it](https://playwright.dev/docs/network#handle-requests)
+  *
+  * @param {string} [url] URL, regex or pattern for to match URL
+  * @param {function} [handler] a function to process request
+  *
+  */
+  async mockRoute(url, handler) {
+    return this.browserContext.route(...arguments);
+  }
+
+  /**
+  * Stops network mocking created by `mockRoute`.
+  *
+  * ```js
+  * I.stopMockingRoute(/(\.png$)|(\.jpg$)/);
+  * I.stopMockingRoute(/(\.png$)|(\.jpg$)/, previouslySetHandler);
+  * ```
+  * If no handler is passed, all mock requests for the rote are disabled.
+  *
+  * @param {string} [url] URL, regex or pattern for to match URL
+  * @param {function} [handler] a function to process request
+  *
+  */
+  async stopMockingRoute(url, handler) {
+    return this.browserContext.unroute(...arguments);
+  }
 }
 
 module.exports = Playwright;
@@ -2224,10 +2335,24 @@ function buildLocatorString(locator) {
 }
 
 async function findElements(matcher, locator) {
+  if (locator.react) return findReact(matcher, locator);
   locator = new Locator(locator, 'css');
   return matcher.$$(buildLocatorString(locator));
 }
 
+async function getVisibleElements(elements) {
+  const visibleElements = [];
+  for (const element of elements) {
+    if (await element.isVisible()) {
+      visibleElements.push(element);
+    }
+  }
+  if (visibleElements.length === 0) {
+    return elements;
+  }
+  return visibleElements;
+}
+
 async function proceedClick(locator, context = null, options = {}) {
   let matcher = await this._getContext();
   if (context) {
@@ -2247,7 +2372,8 @@ async function proceedClick(locator, context = null, options = {}) {
   if (options.force) {
     await els[0].dispatchEvent('click');
   } else {
-    await els[0].click(options);
+    const element = els.length > 1 ? (await getVisibleElements(els))[0] : els[0];
+    await element.click(options);
   }
   const promises = [];
   if (options.waitForNavigation) {
@@ -2258,6 +2384,8 @@ async function proceedClick(locator, context = null, options = {}) {
 }
 
 async function findClickable(matcher, locator) {
+  if (locator.react) return findReact(matcher, locator);
+
   locator = new Locator(locator);
   if (!locator.isFuzzy()) return findElements.call(this, matcher, locator);
 
@@ -2364,6 +2492,15 @@ async function findFields(locator) {
 }
 
 async function proceedDragAndDrop(sourceLocator, destinationLocator) {
+  // modern drag and drop in Playwright
+  if (this.page.dragAndDrop) {
+    const source = new Locator(sourceLocator);
+    const dest = new Locator(destinationLocator);
+    if (source.isBasic() && dest.isBasic()) {
+      return this.page.dragAndDrop(source.simplify(), dest.simplify());
+    }
+  }
+
   const src = await this._locate(sourceLocator);
   assertElementExists(src, sourceLocator, 'Source Element');
 
@@ -2505,11 +2642,13 @@ async function targetCreatedHandler(page) {
           // we are inside iframe?
           const frameEl = await this.context.frameElement();
           this.context = await frameEl.contentFrame();
+          this.contextLocator = null;
           return;
         }
         // if context element was in iframe - keep it
         // if (await this.context.ownerFrame()) return;
         this.context = page;
+        this.contextLocator = null;
       });
   });
   page.on('console', (msg) => {
@@ -2521,11 +2660,20 @@ async function targetCreatedHandler(page) {
     await page.setUserAgent(this.options.userAgent);
   }
   if (this.options.windowSize && this.options.windowSize.indexOf('x') > 0 && this._getType() === 'Browser') {
-    const dimensions = this.options.windowSize.split('x');
-    const width = parseInt(dimensions[0], 10);
-    const height = parseInt(dimensions[1], 10);
-    await page.setViewportSize({ width, height });
+    await page.setViewportSize(parseWindowSize(this.options.windowSize));
+  }
+}
+
+function parseWindowSize(windowSize) {
+  if (!windowSize) return { width: 800, height: 600 };
+  const dimensions = windowSize.split('x');
+  if (dimensions.length < 2 || windowSize === 'maximize') {
+    console.log('Invalid window size, setting window to default values');
+    return { width: 800, height: 600 }; // invalid size
   }
+  const width = parseInt(dimensions[0], 10);
+  const height = parseInt(dimensions[1], 10);
+  return { width, height };
 }
 
 // List of key values to key definitions

package/lib/helper/Protractor.js

@@ -124,6 +124,8 @@ class Protractor extends Helper {
 
     this.isRunning = false;
     this._setConfig(config);
+
+    console.log('Protractor helper is deprecated as well as Protractor itself.\nThis helper will be removed in next major release');
   }
 
   _validateConfig(config) {