Have ideas to improve npm?Join in the discussion! »

    @percy/testcafe
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.1 • Public • Published

    @percy/testcafe

    Version Test

    Percy visual testing for TestCafe.

    Installation

    $ npm install --save-dev @percy/cli @percy/testcafe

    Usage

    This is an example test using the percySnapshot function.

    import percySnapshot from '@percy/testcafe';
    
    fixture('MyFixture')
      .page('http://devexpress.github.io/testcafe/example');
    
    test('Test1', async t => {
      await t.typeText('#developer-name', 'John Doe');
      await percySnapshot(t, 'TestCafe Example');
    });

    Running the test above normally will result in the following log:

    [percy] Percy is not running, disabling snapshots

    When running with percy exec, and your project's PERCY_TOKEN, a new Percy build will be created and snapshots will be uploaded to your project.

    $ export PERCY_TOKEN=[your-project-token]
    $ percy exec -- testcafe chrome:headless tests
    [percy] Percy has started!
    [percy] Created build #1: https://percy.io/[your-project]
    [percy] Running "testcafe chrome:headless tests"
    
     Running tests in:
     - Chrome ...
    
     MyFixture
    [percy] Snapshot taken "TestCafe Example"
     ✓ Test1
    
     1 passed (1s)
    
    [percy] Stopping percy...
    [percy] Finalized build #1: https://percy.io/[your-project]
    [percy] Done!

    Configuration

    percySnapshot(t, name[, options])

    • t(required) - The test controller instance passed from test
    • name (required) - The snapshot name; must be unique to each snapshot
    • options - Additional snapshot options (overrides any project options)
      • options.widths - An array of widths to take screenshots at
      • options.minHeight - The minimum viewport height to take screenshots at
      • options.percyCSS - Percy specific CSS only applied in Percy's rendering environment
      • options.requestHeaders - Headers that should be used during asset discovery
      • options.enableJavaScript - Enable JavaScript in Percy's rendering environment

    Upgrading

    Automatically with @percy/migrate

    We built a tool to help automate migrating to the new CLI toolchain! Migrating can be done by running the following commands and following the prompts:

    $ npx @percy/migrate
    ? Are you currently using @percy/testcafe? Yes
    ? Install @percy/cli (required to run percy)? Yes
    ? Migrate Percy config file? Yes
    ? Upgrade SDK to @percy/testcafe@1.0.0? Yes

    This will automatically run the changes described below for you.

    Manually

    Installing @percy/cli

    If you're coming from a pre-2.0 version of this package, make sure to install @percy/cli after upgrading to retain any existing scripts that reference the Percy CLI command.

    $ npm install --save-dev @percy/cli

    Migrating Config

    If you have a previous Percy configuration file, migrate it to the newest version with the config:migrate command:

    $ percy config:migrate

    Install

    npm i @percy/testcafe

    DownloadsWeekly Downloads

    2,976

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    7.26 kB

    Total Files

    5

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar