Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@flood/chrome

Package Overview
Dependencies
Maintainers
2
Versions
34
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@flood/chrome - npm Package Compare versions

Comparing version 0.1.17 to 0.2.0

docs/api/Browser.md
docs/api/By.md
docs/api/Condition.md
docs/api/ElementHandle.md
docs/api/Functions.md
docs/api/Interfaces.md
docs/api/Locator.md
docs/api/TargetLocator.md
docs/api/Until.md
docs/code-snippet.png
docs/Enumerations.md
docs/examples/images/step-1-homepage.png
docs/examples/images/step-2-hoodies.png
docs/examples/images/step-3-hoodie-addtocart.png
docs/examples/images/step-3-hoodie-product-id.png
docs/examples/images/step-3-hoodies-link-code.png
docs/examples/images/step-4-copy-selector.png
docs/examples/images/step-4-proceed-checkout-code.png
docs/examples/images/upload-script.png
docs/examples/scenario_1_wordpress.md
docs/README.md
docs/SUMMARY.md
utils/docs.ts

337

index.d.ts

@@ -5,2 +5,17 @@ // Type definitions for @flood/chrome 0.1.12

/**
* This interface specifies the available options you can use to configure how your test runs. These properties should be exported using the property `settings`.
*
* **Example:**
*
* ```typescript
* export const settings = {
* loopCount: Infinity,
* clearCache: true
* }
* ```
*
* @export
* @interface TestSettings
*/
export interface TestSettings {

@@ -88,5 +103,19 @@ /**

/**
* Specifies the available options which can be supplied to a step to override global settings.
*
* **Example:**
*
* ```typescript
* step("Step 1", { waitTimeout: 300 }, async browser => {
* await browser.click(...)
* })
* ```
*
* @export
* @interface StepOptions
*/
export interface StepOptions {
/**
* Timeout in seconds for all wait and navigation operations.
* Timeout in seconds for all wait and navigation operations within this <[step]>.
* @default `30` seconds

@@ -98,6 +127,14 @@ */

/**
* Declares the settings for the test
* Declares the settings for the test, overriding settings exported at the top of the test.
*
* Example: setup({ waitTimeout: 60 })
* _This is a secondary syntax to `export const settings = {}` which functions exactly the same way.
*
* **Example:**
*
* ```typescript
* export default () => {
* setup({ waitTimeout: 60 })
* }
* ```
* @export

@@ -109,4 +146,18 @@ * @param {TestSettings} settings

/**
* Declares each step in your test. This must go within the callback from `test()`.
* Declares each step in your test. This must go within your main test expression.
*
* **Example:**
*
* ```typescript
* export default () => {
* step("Step 1", async browser => {
* await browser.visit("https://example.com")
* })
*
* step("Step 2", async browser => {})
*
* step("Step 3", async browser => {})
* }
* ```
*
* @export

@@ -119,5 +170,21 @@ * @param {string} name Step Name

export type StepFunction = (driver: Driver) => Promise<void>
/**
* The standard interface for defining the callback for a <[step]>.
*/
export type StepFunction = (browser: Driver) => Promise<void>
export declare class Driver {
/**
* Browser (also called Driver) is the main entry point in each <[step]>, it's your direct connection to the browser running the test.
*
* ```typescript
* import { step } from "@flood/chrome"
* export default () => {
* step("Start", async browser => {
* await browser.visit("https://challenge.flood.io")
* })
* }
* ```
*
*/
export declare class Browser {
/**

@@ -148,2 +215,10 @@ * Clear browser cookies.

*
* **Example:**
*
* ```typescript
* step("Start", async browser => {
* await browser.visit("https://example.com")
* })
* ```
*
* @param {string} url

@@ -156,6 +231,14 @@ * @returns {Promise<void>}

/**
* Creates a waiter which will pause the test until a condition is met or a timeout is reached.
* Creates a waiter which will pause the test until a condition is met or a timeout is reached. This can be used for validation or control flow.
*
* **Example:**
*
* ```typescript
* step("Start", async browser => {
* await browser.wait(Until.elementIsVisible(By.css('h1.title')))
* })
* ```
*
* You can use either a numeric value in seconds to wait for a specific time,
* or a {@linkcode Condition}, for more flexible conditions.
* or a <[Condition]>, for more flexible conditions.
*/

@@ -167,4 +250,15 @@ public wait(timeoutOrCondition: Condition | number): Promise<boolean>

* currently outside the viewport it will first scroll to that element.
*
* **Example:**
*
* ```typescript
* step("Start", async browser => {
* await browser.click(By.partialLinkText('Start'))
* })
* ```
*
* In this example we're constructing a <[Locatable]> using the `By.partialLinkText()` Locator, which will match the first `<a>` tag which contains the text "Start".
*
*/
public click(selectorOrLocator: string | Locator, options?: ClickOptions): Promise<void>
public click(locatable: Locatable, options?: ClickOptions): Promise<void>

@@ -178,3 +272,3 @@ /**

/**
* Selects an option within a <select> tag using the value of the <option> element.
* Selects an option within a `<select>` tag using the value of the `<option>` element.
*/

@@ -184,3 +278,3 @@ public selectByValue(locatable: Locatable, ...values: string[]): Promise<string[]>

/**
* Selects an option within a <select> tag by its index in the list.
* Selects an option within a `<select>` tag by its index in the list.
*/

@@ -190,3 +284,3 @@ public selectByIndex(locatable: Locatable, index: string): Promise<string[]>

/**
* Selects an option within a <select> tag by matching its visible text.
* Selects an option within a `<select>` tag by matching its visible text.
*/

@@ -201,11 +295,39 @@ public selectByText(locatable: Locatable, text: string): Promise<string[]>

/**
* Types a string into an <input> control, key press by key press.
* Types a string into an `<input>` control, key press by key press. Use this to fill inputs as though it was typed by the user.
*
* **Example:**
* ```typescript
* step("Step 1", async browser => {
* await browser.type(By.css("#email"), "user@example.com")
* })
* ```
*
*/
public type(locatable: Locatable, text: string, options?: { delay: number }): Promise<void>
/**
* Removes focus from the specified DOM element.
*
* @param {Locatable} locator
* @returns {Promise<void>}
* @memberof Driver
*/
public blur(locator: Locatable): Promise<void>
/**
* Makes the element located by the first argument the receiver of future input.
*
* @param {Locatable} locator The <[Locator]> to use to find an element to send focus to.
* @returns {Promise<void>}
* @memberof Driver
*/
public focus(locator: Locatable): Promise<void>
/**
* Presses a key on the keyboard specified by key code. For example, <[Key.ALT]>
*/
public press(
/**
* The key code to send.
*/
keyCode: string,

@@ -224,3 +346,3 @@ options?: {

/**
* Takes a screenshot of the whole page and saves it to the results folder with a random sequential name.
* Takes a screenshot of the whole page and saves it to the `flood/results` folder with a random sequential name. You can download the archive of your test results at the end of the test to retrieve these screenshots.
*/

@@ -240,3 +362,3 @@ public takeScreenshot(options?: ScreenshotOptions): Promise<void>

/**
* Switch the focus of the browser to another frame or window
* Switch the focus of the browser to another frame, tab, or window.
*/

@@ -246,2 +368,11 @@ public switchTo(): TargetLocator

export type Driver = Browser
/**
* Example Handle represents a remote element in the DOM of the browser. It implements useful methods for querying and interacting with this DOM element.
*
* All methids on this class are asynchronous and must be used with `await` to wait for the result to fulfill from the browser.
*
* @class ElementHandle
*/
declare class ElementHandle {

@@ -266,4 +397,10 @@ /**

/**
* Sends a series of key modifiers to the element.
*/
public sendKeys(...keys: string[]): Promise<void>
/**
* Sends a series of key presses to the element to simulate a user typing on the keyboard. Use this to fill in input fields.
*/
public type(text: string): Promise<void>

@@ -287,3 +424,3 @@

/**
* Locates an element using the supplied {@linkcode Locator}, returning an {@linkcode ElementHandle}
* Locates an element using the supplied <[Locator]>, returning an <[ElementHandle]>
*/

@@ -293,16 +430,34 @@ public findElement(locator: string | Locator): Promise<ElementHandle | null>

/**
* Locates all elements using the supplied {@linkcode Locator}, returning an array of {@linkcode ElementHandle}'s
* Locates all elements using the supplied <[Locator]>, returning an array of <[ElementHandle]>'s
*/
public findElements(locator: Locator | string): Promise<ElementHandle[]>
/**
* Fetches the remote elements `tagName` property.
*/
public tagName(): Promise<string | null>
/**
* Fetches the remote elements `id` attribute.
*/
public getId(): Promise<string | null>
/**
* If the remote element is selectable (such as an `<option>` or `input[type="checkbox"]`) this methos will indicate whether it is selected.
*/
public isSelected(): Promise<boolean>
/**
* Checks whether the remote element is selectable. An element is selectable if it is an `<option>` or `input[type="checkbox"]` or radio button.
*/
public isSelectable(): Promise<boolean>
/**
* Checks whether the remote element is displayed in the DOM and is visible to the user without being hidden by CSS or occluded by another element.
*/
public isDisplayed(): Promise<boolean>
/**
* Checks whether the remote element is enabled. Typically this means it does not have a `disabled` property or attribute applied.
*/
public isEnabled(): Promise<boolean>

@@ -315,7 +470,18 @@

/**
* Fetches the remote elements physical dimensions as `width` and `height`.
*/
public size(): Promise<{ width: number; height: number }>
/**
* Fetches the remote elements physical location as `x` and `y`.
*/
public location(): Promise<{ x: number; y: number }>
}
/**
* The target locator is accessed through `browser.switchTo()` and enables you to switch frames, tabs, or browser windows. As well as access the `activeElement` or an alert box.
*
* @class TargetLocator
*/
declare class TargetLocator {

@@ -348,5 +514,21 @@ /**

/**
* A Condition represents a predicate which can be used to wait for an <[ElementHandle]>.
*
* @class Condition
*/
declare class Condition {}
/**
* A Locator is a generic class constructed from a <[By]> method which can be used to find an Element or Elements on a page.
*
* @class Locator
*/
declare class Locator {}
/**
* By is used to create <[Locator]>'s to find Elements or use in any place which accepts a Locator or <[Locatable]>.
*
* @class By
*/
declare class By {

@@ -378,3 +560,9 @@ /**

/**
* Locates a link (<a>) containing some of the specified text
* Locates a link (`<a>` tag) containing some of the specified text.
*
* **Example:**
* ```typescript
* await browser.findElement(By.partialLinkText("Checkout"))
* ```
*
* @param text

@@ -385,5 +573,6 @@ */

/**
* Locates all elements whose `textContent` equals the given
* substring and is not hidden by CSS.
* Locates all elements whose `textContent` equals the given substring and is not hidden by CSS.
*
* This selector works in multiple stages, by first finding the element matching the text predicate, and then testing whether it is visible ion the viewport and is not occluded by another element or style property.
*
* @param {string} text The string to check for in a elements's visible text.

@@ -416,2 +605,9 @@ */

/**
* Until is used to create wait <[Conditions]> which are used to wait for elements to become active, visible, invisible or disabled on the page.
*
* You would typically use these to control the flow of you test.
*
* @class Until
*/
declare class Until {

@@ -438,3 +634,3 @@ /**

* Creates a condition that will wait for the given element to be disabled
* @param selectorOrLocator
* @param selectorOrLocator A <[Locatable]> to use to find the element.
*/

@@ -445,3 +641,3 @@ static elementIsDisabled(locatable: Locatable): Condition

* Creates a condition that will wait for the given element to be enabled
* @param selectorOrLocator
* @param selectorOrLocator A <[Locatable]> to use to find the element.
*/

@@ -452,3 +648,3 @@ static elementIsEnabled(locatable: Locatable): Condition

* Creates a condition that will wait for the given element to be deselected.
* @param selectorOrLocator
* @param selectorOrLocator A <[Locatable]> to use to find the element.
*/

@@ -459,3 +655,3 @@ static elementIsSelected(locatable: Locatable): Condition

* Creates a condition that will wait for the given element to be in the DOM, yet not visible to the user
* @param selectorOrLocator
* @param selectorOrLocator A <[Locatable]> to use to find the element.
*/

@@ -466,3 +662,11 @@ static elementIsNotSelected(locatable: Locatable): Condition

* Creates a condition that will wait for the given element to be selected.
* @param selectorOrLocator
*
* Example:
* ```typescript
* step("Step 1", async browser => {
* await browser.wait(Until.elementIsVisible(By.partialLinkText("Start")))
* })
* ```
*
* @param selectorOrLocator A <[Locatable]> to use to find the element.
*/

@@ -473,3 +677,12 @@ static elementIsVisible(locatable: Locatable): Condition

* Creates a condition that will wait for the given element to become visible.
* @param selectorOrLocator
*
* Example:
* ```typescript
* step("Step 1", async browser => {
* await browser.click(By.css('.hide-panel'))
* await browser.wait(Until.elementIsNotVisible(By.id("btn")))
* })
* ```
*
* @param selectorOrLocator A <[Locatable]> to use to find the element.
*/

@@ -484,4 +697,3 @@ static elementIsNotVisible(locatable: Locatable): Condition

/**
* Creates a condition which will wait until the element's text content contains
* the target text.
* Creates a condition which will wait until the element's text content contains the target text.
*/

@@ -491,4 +703,3 @@ static elementTextContains(locatable: Locatable, text: string): Condition

/**
* Creates a condition which will wait until the element's text exactly matches the target text,
* excluding leading and trailing whitespace.
* Creates a condition which will wait until the element's text exactly matches the target text, excluding leading and trailing whitespace.
*/

@@ -509,2 +720,3 @@ static elementTextIs(locatable: Locatable, text: string): Condition

* Creates a condition that will wait for the given element to become stale.
*
* An element is considered stale once it is removed from the DOM, or a new page has loaded.

@@ -545,4 +757,13 @@ */

/**
* Locatable is the default type to use in place of a <[Locator]>. It can be a Locator or a CSS selector string.
*/
export type Locatable = Locator | string
/**
* Lists all available keyboard control keys which can be used when sending a key press combination.
*
* @export
* @enum {number}
*/
export enum Key {

@@ -614,3 +835,5 @@ NULL,

/** The navigation options. */
/**
* This interface represents the available options to pass to <[Driver]>.visit()
*/
export interface NavigationOptions {

@@ -629,7 +852,24 @@ /**

/**
* Specifies the available mouse buttons to use when clicking. The default is always `left`
*/
export enum MouseButtons {
// Left mouse button
LEFT = 'left',
// Right mouse button
RIGHT = 'right',
/**
* Middle mouse button
*/
MIDDLE = 'middle',
}
/**
* Specifies the available options to send when clicking to modify the click behaviour. For example, to send a double click, set `clickCount: 2`.
*
* @export
* @interface ClickOptions
*/
export interface ClickOptions {

@@ -747,36 +987,1 @@ /** defaults to left */

}
export function assert(value: boolean, message?: string): void
export namespace assert {
export class AssertionError {
name: string
message: string
actual: any
expected: any
operator: string
generatedMessage: boolean
stack: string[]
isFailure: boolean
constructor(options?: {
message?: string
actual?: any
expected?: any
operator?: string
stackStartFunction?: Function
})
}
export function fail(message: string): void
export function fail(actual: any, expected: any, message?: string, operator?: string): void
export function ok(value: any, message?: string): void
export function equal(actual: any, expected: any, message?: string): void
export function notEqual(actual: any, expected: any, message?: string): void
export function deepEqual(actual: any, expected: any, message?: string): void
export function notDeepEqual(acutal: any, expected: any, message?: string): void
export function strictEqual(actual: any, expected: any, message?: string): void
export function notStrictEqual(actual: any, expected: any, message?: string): void
export function deepStrictEqual(actual: any, expected: any, message?: string): void
export function notDeepStrictEqual(actual: any, expected: any, message?: string): void
export function ifError(value: any): void
}

24

package.json
{
"name": "@flood/chrome",
"version": "0.1.17",
"version": "0.2.0",
"private": false,

@@ -8,3 +8,6 @@ "description": "Flood Chrome provides an API for scripting Browser Level Load Tests",

"scripts": {
"release": "npm-release"
"release": "npm-release",
"doc": "yarn typedoc && ts-node ./utils/docs.ts",
"docs": "node --trace-warnings $(npm bin)/nodemon --ext ts --exec ts-node -- ./utils/docs.ts",
"typedoc": "typedoc --json docs.json --includeDeclarations ./index.d.ts"
},

@@ -22,7 +25,17 @@ "repository": {

"dependencies": {
"typescript": "^2.6.1"
"typescript": "^2.7"
},
"main": "index.js",
"devDependencies": {
"npm-release": "^1.0.0"
"glob": "^7.1.2",
"commonmark": "^0.28.1",
"front-matter": "^2.3.0",
"gitbook-cli": "^2.3.2",
"lodash.camelcase": "^4.3.0",
"markdown-table": "^1.1.1",
"mkdirp": "^0.5.1",
"nodemon": "^1.14.12",
"npm-release": "^1.0.0",
"ts-node": "^4.1.0",
"typedoc": "^0.10.0"
},

@@ -32,2 +45,3 @@ "keywords": [

"browser-testing",
"selenium",
"bdd",

@@ -41,3 +55,3 @@ "tdd",

"trailingComma": "all",
"printWidth": 100,
"printWidth": 80,
"useTabs": true,

@@ -44,0 +58,0 @@ "tabWidth": 2,

118

README.md

@@ -1,56 +0,98 @@

# Browser Level Load Testing with Flood
# `@flood/chrome`
> Flood Chrome brings the familiar power of traditional browser scripting tools with the proven performance of Flood to create an easy to use and maintainable performance testing tool.
Flood Chrome brings the familiar power of traditional browser scripting tools with the proven performance of Flood to create an easy to use and maintainable performance testing tool.
This package provides the type definitions to help you write Flood Chrome "BLU" scripts and run them on Flood using real browsers.
Flood Chrome works by spinning up hundreds or even thousands of instances of Google Chrome, and running scripts you define here to drive a load test. We can this Browser Level Load Testing.
# Get Started
> This project is currently in beta and APIs are subject to change.
**1. Create a Workspace**
![Flood Chrome Example code](./code-snippet.png)
Create a new project directory or skip to step 2 if you're using an existing project
# Quickstart
**2. Install `@flood/chrome`**
First, make sure you have installed the [latest version of NodeJS](https://nodejs.org) for your platform.
Add `@flood/chrome` as a development dependency to your `package.json`:
#### 1. Download Flood CLI
**On macOS**, install using homebrew:
```bash
# using yarn
yarn add @flood/chrome
brew install flood-io/taps/flood
```
# using NPM
npm install -sd @flood/chrome
**On linux**, download the [latest release](https://github.com/flood-io/cli/releases/latest) for your platform, then extract and install it:
```bash
# assuming you're installing version 1.0.0 on linux
cd ~/Downloads
mkdir flood
tar zxvf flood-1.0.0-linux-amd64.zip -C flood
# move the file to somewhere on your $PATH:
mv flood/flood /usr/local/bin/flood
# optionally, tidy up:
rm -rf flood
```
**3. Create test script**
**On Windows:**
Flood Chrome uses TypeScript for type correctness and inline documentation as you write. Make sure you have TypeScript support enabled in your editor.
We're still working on a Windows build, stay tuned.
```ts
// 1. Import the basic test components from this package
import { test, step, assert } from '@flood/chrome'
#### 2. Initialize Project
// 2. Define the test. Every test must make this call to register itself
test(() => {
/**
* 3. Define your first step.
*
* Each step must have a unique label as the first argument, and an async callback function
* as the second argument. The callback function receives an instance of the Driver, which
* exposes all the functions you can call on Browser during a test.
*
* Using async/await is simply a cleaner way of using Promises, and allows us to keep the test plan
* very clean and succinct without declaring multiple Promise chain callbacks.
*/
step('1. Start challenge', async (driver: Driver) => {
await driver.visit('https://challenge.flood.io')
let h2 = await driver.waitForElement('h2')
let h2Text = await driver.extractText(h2)
assert.equal(h2Text, 'Flood Challenge')
})
})
The very first thing you should do is authenticate the `flood` tool with your Flood account. _If you don't have an account, you can sign up for free at [Flood](https://flood.io)._
```bash
# Login
flood login
# Initialize a new project
flood init my-flood-chrome-test
# Change to this directory and install dependencies
cd my-flood-chrome-test
yarn install
```
**4. Upload to Flood**
#### 3. Write and validate your script
Once you've written your first script, simply [upload it to Flood](https://flood.io/app) and launch a test.
Edit `test.ts` in your editor of choice. To learn more about the scripting capabilities we've put together a detailed tutorial on [testing the "Flood Merchandice Store"](examples/scenario_1_wordpress.md).
As you're writing your script, you can validate it by running it on the Flood validation service:
```bash
flood verify test.ts
```
This will output a detailed list of steps and configuration options it has read from your script, then execute it within the Flood Chrome Environment.
#### 4. Run a real Load Test on [Flood](https://flood.io)
Now that you have a test script, upload it to [Flood](https://flood.io/app) as a new Stream and launch a Flood (a test).
![Upload your script to Tricentis Flood](examples/images/upload-script.png)
Continue learning more Flood Chrome techniques by starting with our API documentation. The main entry point to all tests is the <[Browser]> class and a great place to get a feel for the capabilities of each test.
## Why?
Over the years, countless customers have mentioned that getting started with Load Testing is a daunting task. That's why it's often left until the last minute before launch. At Flood, it's our mission to make Load Testing less daunting and accessible to everyone. We want to give developers and testers an easy way to ensure that whatever part of the system they're responsible for meets expectations for both functionality and performance.
## What can I do with it?
* Flood Chrome can be used to **put load on any web accessible application** and measure how it performs as load is ramped up,
* **Measure performance regressions** after deploys by integrating it with you CI/CD pipeline,
* Measure how your application's response time from different regions as experienced by your customers,
* Create **realistic load scenarios** which stress test your network infrastructure without developing a complex protocol level load test scripts.
## Documentation
* [Deep dive tutorial](examples/scenario_1_wordpress.md)
* [API Documentation](api/Browser.md)
## Reporting Issues
If you encounter any issues with the `@flood/chrome` project or Flood Chrome product, please [open an issue](https://github.com/flood-io/browser-test/issues) on the GitHub project.
If you're encountering issues with Flood itself, please contact Flood Support from within the Flood Dashboard.
log.0000000001
yarn.lock

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc