@cloudscape-design/browser-test-tools 3.0.0

package/dist/page-objects/screenshot.js

@@ -0,0 +1,57 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+const browser_scripts_1 = require("../browser-scripts");
+const image_utils_1 = require("../image-utils");
+const base_1 = __importDefault(require("./base"));
+const full_page_screenshot_1 = __importDefault(require("./full-page-screenshot"));
+class ScreenshotPageObject extends base_1.default {
+    async focusNextElement() {
+        return this.keys('Tab');
+    }
+    async scrollToBottom(selector) {
+        await this.browser.execute(browser_scripts_1.scrollToBottom, selector);
+    }
+    async scrollToRight(selector) {
+        await this.browser.execute(browser_scripts_1.scrollToRight, selector);
+    }
+    async fullPageScreenshot() {
+        // preserve scroll position in order to avoid side effects after screenshot taking
+        const scrollPosition = await this.getWindowScroll();
+        // Wait for the page to settle before taking a screenshot
+        await this.waitForJsTimers();
+        const screenshot = await (0, full_page_screenshot_1.default)(this.browser);
+        // restore scroll position
+        await this.windowScrollTo(scrollPosition);
+        return screenshot;
+    }
+    async captureBySelector(selector, options = {}) {
+        await this.waitForVisible(selector);
+        const { pixelRatio, top, left } = await this.getViewportSize();
+        const box = await this.getBoundingBox(selector);
+        const screenshot = options.viewportOnly ? await this.browser.takeScreenshot() : await this.fullPageScreenshot();
+        const image = await (0, image_utils_1.parsePng)(screenshot);
+        const offset = { top: box.top, left: box.left };
+        if (!options.viewportOnly) {
+            // Correct potential scrolling offsets when using a full page screenshot
+            offset.top += top;
+            offset.left += left;
+        }
+        return { image, offset, pixelRatio, height: box.height, width: box.width };
+    }
+    async captureViewport() {
+        const { height, width } = await this.getViewportSize();
+        const offset = {
+            top: 0,
+            left: 0,
+        };
+        const screenshot = await this.browser.takeScreenshot();
+        const image = await (0, image_utils_1.parsePng)(screenshot);
+        return { image, offset, height, width };
+    }
+}
+exports.default = ScreenshotPageObject;

package/dist/page-objects/types.d.ts

@@ -0,0 +1,27 @@
+import { PNG } from 'pngjs';
+export interface ElementSize {
+    width: number;
+    height: number;
+}
+export interface ElementOffset {
+    top: number;
+    left: number;
+}
+export interface ElementRect extends ElementOffset, ElementSize {
+    bottom: number;
+    right: number;
+}
+export interface ViewportSize extends ElementOffset, ElementSize {
+    pageHeight: number;
+    screenWidth: number;
+    screenHeight: number;
+    pixelRatio: number;
+}
+export interface ScreenshotCapturingOptions {
+    viewportOnly?: boolean;
+}
+export interface ScreenshotWithOffset extends ElementSize {
+    image: PNG;
+    offset: ElementOffset;
+    pixelRatio?: number;
+}

package/dist/page-objects/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/page-objects/utils.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="webdriverio/async" />
+import { ViewportSize, ElementRect } from './types';
+export declare function getElementCenter(rect: ElementRect): {
+    x: number;
+    y: number;
+};
+export declare function calculateIosTopOffset(dimensions: Pick<ViewportSize, 'screenWidth' | 'screenHeight' | 'pixelRatio'>): number;
+export declare function getPuppeteer(browser: WebdriverIO.Browser): Promise<import("puppeteer-core/lib/cjs/puppeteer/common/Browser").Browser | null>;

package/dist/page-objects/utils.js

@@ -0,0 +1,72 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getPuppeteer = exports.calculateIosTopOffset = exports.getElementCenter = void 0;
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+const exceptions_1 = require("../exceptions");
+function getElementCenter(rect) {
+    return {
+        x: Math.floor(rect.left + rect.width / 2),
+        y: Math.floor(rect.top + rect.height / 2),
+    };
+}
+exports.getElementCenter = getElementCenter;
+// This is the pixel value *before* applying the device pixel ratio
+const iosAddressBarHeight = 50;
+// Device specific sizes for iOS devices. Models before iPhone X are covered by the default value.
+// Viewport values taken from https://yesviz.com/iphones.php
+const iosDeviceConfig = [
+    {
+        name: 'iPhone 12 (Pro)',
+        width: 390,
+        height: 844,
+        statusBarHeight: 141,
+    },
+    {
+        name: 'iPhone 12 Pro Max',
+        width: 428,
+        height: 926,
+        statusBarHeight: 141,
+    },
+    {
+        name: 'iPhone 11 Pro',
+        width: 375,
+        height: 812,
+        statusBarHeight: 132,
+    },
+    {
+        name: 'iPhone 11 Pro Max',
+        width: 414,
+        height: 896,
+        statusBarHeight: 132,
+    },
+];
+// Screenshots on iOS include all iOS UI elements like toolbars and navigation, so we need to
+// cut them out of screenshots. This function provides relevant offsets.
+function calculateIosTopOffset(dimensions) {
+    const { screenWidth: width, screenHeight: height } = dimensions;
+    // Default height for most models before the iPhone X
+    let statusBarHeight = 20 * dimensions.pixelRatio;
+    const deviceConfig = iosDeviceConfig.find(config => (width === config.width && height === config.height) || (width === config.height && height === config.width));
+    if (deviceConfig) {
+        statusBarHeight = deviceConfig.statusBarHeight;
+    }
+    const addressBarHeight = iosAddressBarHeight * dimensions.pixelRatio;
+    return statusBarHeight + addressBarHeight;
+}
+exports.calculateIosTopOffset = calculateIosTopOffset;
+async function getPuppeteer(browser) {
+    try {
+        const puppeteer = await browser.getPuppeteer();
+        return puppeteer;
+    }
+    catch (error) {
+        if (error instanceof Error &&
+            (error.message.includes(exceptions_1.WebdriverIoUnsupportedPuppeteerErrorText) ||
+                error.message.includes(exceptions_1.WebdriverIoRemotePuppeteerErrorText))) {
+            return null;
+        }
+        throw error;
+    }
+}
+exports.getPuppeteer = getPuppeteer;

package/dist/use-browser.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="webdriverio/async" />
+import { WebDriverOptions } from './browsers/browser-creator';
+declare type BrowserOptions = {
+    browserName: string;
+    seleniumType: string;
+    browserCreatorOptions: Record<string, any>;
+    webdriverOptions: Partial<WebDriverOptions>;
+};
+interface TestFunction {
+    (browser: WebdriverIO.Browser): Promise<void> | void;
+}
+declare function useBrowser(optionsOverride: Partial<WebDriverOptions>, testFn: TestFunction): () => Promise<void>;
+declare function useBrowser(testFn: TestFunction): () => Promise<void>;
+export default useBrowser;
+export declare function configure(newOptions: Partial<BrowserOptions>): void;

package/dist/use-browser.js

@@ -0,0 +1,50 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.configure = void 0;
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+const assert_1 = require("assert");
+const browser_1 = __importDefault(require("./browser"));
+const merge_1 = __importDefault(require("lodash/merge"));
+const options = {
+    browserName: 'ChromeHeadless',
+    seleniumType: 'local',
+    browserCreatorOptions: {},
+    webdriverOptions: {},
+};
+function useBrowser(...args) {
+    // How to do type-safe function overloads: https://stackoverflow.com/questions/55852612/typescript-overloads-optional-arguments-and-type-inference
+    const optionsOverride = args.length === 1 ? {} : args[0];
+    const testFn = args.length === 1 ? args[0] : args[1];
+    return async () => {
+        const creator = (0, browser_1.default)(options.browserName, options.seleniumType, options.browserCreatorOptions);
+        const browser = await creator.getBrowser({ ...options.webdriverOptions, ...optionsOverride });
+        try {
+            if ('getLogs' in browser) {
+                // dispose logs from previous sessions, if there are any
+                await browser.getLogs('browser');
+            }
+            await testFn(browser);
+            // This method does not exist in w3c protocol
+            if ('getLogs' in browser) {
+                const logs = (await browser.getLogs('browser'));
+                const errors = logs.filter(entry => entry.level === 'SEVERE');
+                assert_1.strict.deepEqual(errors, [], 'There should be no errors in the console');
+            }
+            else {
+                console.warn('Unable to check browser console, webdriver does not support this feature');
+            }
+        }
+        finally {
+            await browser.deleteSession();
+        }
+    };
+}
+exports.default = useBrowser;
+function configure(newOptions) {
+    (0, merge_1.default)(options, newOptions);
+}
+exports.configure = configure;

package/image-utils.d.ts

@@ -0,0 +1 @@
+export * from './dist/image-utils';export { default } from './dist/image-utils';

package/image-utils.js

@@ -0,0 +1 @@
+module.exports = require('./dist/image-utils');

package/package.json

@@ -0,0 +1,63 @@
+{
+  "bugs": {
+    "url": "https://github.com/cloudscape-design/browser-test-tools/issues"
+  },
+  "bundleDependencies": false,
+  "dependencies": {
+    "@types/pngjs": "^6.0.1",
+    "aws-sdk": "^2.1140.0",
+    "get-stream": "^6.0.1",
+    "lodash": "^4.17.21",
+    "p-retry": "^4.6.2",
+    "pixelmatch": "^5.3.0",
+    "pngjs": "^6.0.0",
+    "webdriverio": "^7.19.7"
+  },
+  "deprecated": false,
+  "description": "This package contains the source code for tools used for building and testing the React components for the [Cloudscape Design System](https://cloudscape.design/).",
+  "exports": {
+    "./chrome-launcher": "./chrome-launcher.js",
+    "./image-utils": "./image-utils.js",
+    "./page-objects": "./page-objects.js",
+    "./use-browser": "./use-browser.js",
+    "./browser": "./browser.js"
+  },
+  "files": [
+    "dist",
+    "*.js",
+    "*.d.ts"
+  ],
+  "homepage": "https://cloudscape.design",
+  "jest": {
+    "preset": "ts-jest",
+    "testEnvironment": "node",
+    "collectCoverage": true,
+    "collectCoverageFrom": [
+      "src/**/*.ts",
+      "!src/browser-scripts/**",
+      "!src/page-objects/browser-scripts.ts"
+    ],
+    "coverageReporters": [
+      "json-summary",
+      "lcov",
+      "cobertura"
+    ],
+    "setupFilesAfterEnv": [
+      "<rootDir>/test/utils/setup.js"
+    ],
+    "globalSetup": "<rootDir>/test/utils/start-chromedriver.js",
+    "globalTeardown": "<rootDir>/test/utils/stop-chromedriver.js"
+  },
+  "lint-staged": {
+    "*.{js,ts}": [
+      "eslint --fix"
+    ]
+  },
+  "name": "@cloudscape-design/browser-test-tools",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/cloudscape-design/browser-test-tools.git"
+  },
+  "version": "3.0.0",
+  "license": "Apache-2.0"
+}

package/page-objects.d.ts

@@ -0,0 +1 @@
+export * from './dist/page-objects';export { default } from './dist/page-objects';

package/page-objects.js

@@ -0,0 +1 @@
+module.exports = require('./dist/page-objects');

package/use-browser.d.ts

@@ -0,0 +1 @@
+export * from './dist/use-browser';export { default } from './dist/use-browser';

package/use-browser.js

@@ -0,0 +1 @@
+module.exports = require('./dist/use-browser');