percy / percy-testcafe Goto Github PK

View Code? Open in Web Editor NEW

8.0 10.0 4.0 1.13 MB

TestCafe client library for visual regression testing with Percy

Home Page: https://docs.percy.io/docs/testcafe

License: MIT License

JavaScript 92.75% TypeScript 7.25%

percy testcafe visual-testing percy-sdk

percy-testcafe's Introduction

@percy/testcafe

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 - See per-snapshot configuration options

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/[email protected]? 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

percy-testcafe's People

Contributors

Stargazers

Watchers

Forkers

gondar00 brunokrebs ashwinpathak

percy-testcafe's Issues

Error: Cannot prepare tests due to an error.

I am getting the following error while doing mostly the same as in the tutorial/example.
Am I still doing something wrong?

Starting http-server
Running tests (see command in output (3.):

import { Selector } from "testcafe";
import { Config } from "./testcafe.config";
import percySnapshot from "@percy/testcafe";

fixture(`Intro screens test`).page`${Config.baseUrl}`; // base Url is http://localhost:8080

test("Finish intro screens", async (t) => {
  const nextButton = Selector("a").withAttribute("role", "button").child().withText("Weiter");
  const websiteText = Selector("html").textContent;

  const titleForIntro1 = "Willkommen bei der CovMap";

  await t.expect(websiteText).contains(titleForIntro1);
  await percySnapshot(t, "Final Site");
});

Percy Fails

PS C:\Develop\GitHub\CovOpen\CovMapper> npm run percy

> [email protected] percy C:\Develop\GitHub\CovOpen\CovMapper
> percy exec -- testcafe chrome testcafe/*.spec.js

[percy] Percy has started!
[percy] Created build #18: <redacted>/7450300
[percy] Running "testcafe chrome testcafe/*.spec.js"
 Running tests in:
 - Chrome 86.0.4240.75 / Windows 10

 Intro screens test
[percy] Could not take DOM snapshot "[object Object]"
[percy] Error: Cannot prepare tests due to an error.

Cannot implicitly resolve the test run in the context of which the test controller action should be executed. Use test function's 't' argument instead.
 √ Finish intro screens


 1 passed (4s)
[percy] Stopping percy...
[percy] Finalized build #18: <redacted>/7450300
[percy] Done!

If you more context is needed, this is the branch I am working on: https://github.com/CovOpen/CovMapper/tree/chore/percy-integration/testcafe

esModuleInterop / typescript causes issues

When setting the compilerOption esModuleInterop to true

Issue

Example test:

import percySnapshot from '@percy/testcafe';
fixture('Session').page('http://localhost:8080');

test('Session: Visual Regression', async (target) => {
   await percySnapshot(target, 'Session: Welcome');
});

(ignore type error with percySnapshot, covered in #108)

Gives me an error of:

   1) TypeError: testcafe_1.default is not a function

      Browser: Chrome 90.0.4430.212 / macOS 10.15.7

          8 |
          9 |import percySnapshot from '@percy/testcafe';
         10 |fixture('Session').page('http://localhost:8080');
         11 |
         12 |test('Session: Visual Regression', async target => {
       > 13 |  await percySnapshot(target, 'Session: Welcome');
         14 |});
         15 |

Workaround

import * as percySnapshot from '@percy/testcafe';

fixture('Session').page('http://localhost:8080');

test('Session: Visual Regression', async target => {
  await (percySnapshot as any)(target, 'Session: Welcome');
});

(replace the any with the type when fixed)

Futher Reading

DevExpress/testcafe#3983

https://stackoverflow.com/questions/56238356/understanding-esmoduleinterop-in-tsconfig-file

Finalizing SnapShot Error

I am getting random errors from percy that are causing percy builds to (randomly) fail.

I am running a very simple test-cafe script that navigates to a series of urls and takes a percy snapshot at each url.

I am running the test from localhost, and the issue happens when I test against a local or remote URL.

I have high internet bandwidth, so I don't think this is a connectivity issue.

What is the cause of this error?

[percy] StatusCodeError 400 - {"errors":[{"status":"bad_request","detail":"Finalizing snapshot 558704687 failed: cannot finalize before all snapshot resources are uploaded. This is likely a client library bug, please make sure that content for all SHAs in 'missing-resources' from the snapshot response are uploaded before calling finalize."}]} | Fri Apr 16 2021 09:37:00 GMT-0400 (Eastern Daylight Time)

types are missing testcafe target as first arg

The types are:

export default function percySnapshot(  name: string,  options?: SnapshotOptions): Promise<void>;

But the readme states:

percySnapshot(t, 'TestCafe Example');

Looks like the first arg is missing

testcafe_2.default is not a function

I'm using TestCafe together with Percy in a Gatsby project that uses TypeScript. My test looks like

import { Selector } from 'testcafe';
import percySnapshot from '@percy/testcafe';

fixture('Visual').page('http://localhost:9000');

test('with percy', async t => {
  await t
    .expect(Selector('title').innerText)
    .eql('This as a test');

  await percySnapshot(t, 'Integrate with Percy');
});

and I'm running the tests with

percy exec -- testcafe chrome:headless 'test/e2e/**/*.ts' --app 'gatsby serve'

Unfortunately I get the error

   1) TypeError: testcafe_2.default is not a function

      Browser: HeadlessChrome 76.0.3809 / Mac OS X 10.14.6

          6 |test('with percy', async t => {
          7 |  await t
          8 |    .expect(Selector('title').innerText)
          9 |    .eql('This as a test');
         10 |
       > 11 |  await percySnapshot(t, 'Integrate with Percy');
         12 |});
         13 |

         at <anonymous> (/Users/me/project/test/e2e/visual.test.ts:11:22)
         at fulfilled (/Users/me/project/test/e2e/visual.test.ts:5:58)
         at $$testcafe_test_run$$Wv1mGfF2z$$
      (/Users/me/project/node_modules/testcafe/src/api/test-run-tracker.js:76:16)
         at $$testcafe_test_run$$Wv1mGfF2z$$
      (/Users/me/project/node_modules/testcafe/src/api/test-run-tracker.js:76:16)

All other tests that are not calling percySnapshot() works perfectly.

Test hangs on returning domSnapshot

The problem

I deal with a bit bloated DOM, where result of PercyDOM.serialize(options) is over 6MB.
When I run testcafe with percySnapshot it hangs at

    let { domSnapshot, url } = await t.eval(() => ({
      /* eslint-disable-next-line no-undef */
      domSnapshot: PercyDOM.serialize(options),
      url: document.URL
    }), { boundTestRun: t, dependencies: { options } });

If I run PercyDOM.serialize in browser console it works blazing fast, and apparently testcafe has a problem with returning larger objects from client function. Not sure what would be the best way to address it, maybe using something like JSzip before returning serialized snapshot to compress it.

Environment

Node version: v14.18.1
@percy/cli version: 1.0.0-beta.76
@percy/testcafe version: 1.0.1
OS version: MacOS Monterey 12.2.1
Type of shell command-line [interface]: zsh

413 Request Entity Too Large when uploading 10 screenshots

I'm getting this error after running my tests, when percy is stating that it's waiting for the snapshots to complete . Not sure where this is coming from, as it didn't happen before.

percy] stopping percy...
[percy] waiting for 10 snapshots to complete...
[percy] StatusCodeError 413 - "<html>\r\n<head><title>413 Request Entity Too Large</title></head>\r\n<body>\r\n<center><h1>413 Request Entity Too Large</h1></center>\r\n<hr><center>nginx/1.16.1</center>\r\n</body>\r\n</html>\r\n" | Tue Aug 11 2020 10:07:16 GMT+1000 (Australian Eastern Standard Time)
[percy] StatusCodeError 400 - {"errors":[{"status":"bad_request","detail":"Finalizing snapshot 369503809 failed: cannot finalize before all snapshot resources are uploaded. This is likely a client library bug, please make sure that content for all SHAs in 'missing-resources' from the snapshot response are uploaded before calling finalize."}]} | Tue Aug 11 2020 10:07:16 GMT+1000 (Australian Eastern Standard Time)
[percy] done.
[percy] error finalizing build
[percy] StatusCodeError 400 - {"errors":[{"status":"bad_request","detail":"Finalizing build 6442497 failed: cannot finalize before all snapshot resources are uploaded. This is likely a client error, please make sure that content for all SHAs in 'missing-resources' from the snapshot response are uploaded before calling finalize."}]} | Tue Aug 11 2020 10:07:17 GMT+1000 (Australian Eastern Standard Time)

The command I use to run my tests is something like so:

npx percy exec -- testcafe chrome folder/*test.* --skip-js-errors --speed 0.7

I am also using a free account, if that is of any relevance.

Support testcafe@2

Tescafé jsut released a new major version, which means this package has to update its peer dependency on it:

"peerDependencies": {
    "testcafe": "~1"
  },

npm ERR! Could not resolve dependency:
npm ERR! peer testcafe@"~1" from @percy/[email protected]
npm ERR! node_modules/@percy/testcafe
npm ERR!   dev @percy/testcafe@"1.0.2" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/testcafe
npm ERR!   peer testcafe@"~1" from @percy/[email protected]
npm ERR!   node_modules/@percy/testcafe
npm ERR!     dev @percy/testcafe@"1.0.2" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

Unable to snapshot dynamic element

The problem

My scenario:

navigate to page with testcafe
click on a button which triggers client side javascript that displays modal overlay
assert with testcafe that modal is visible on screen
use percySnapshot

Unfortunately the result of this snapshot is a page without modal.
Are there any particular steps needed to properly take this snapshot or is it just not supported

percy / percy-testcafe Goto Github PK

percy-testcafe's Introduction

@percy/testcafe

Installation

Usage

Configuration

Upgrading

Automatically with @percy/migrate

Manually

Installing @percy/cli

Migrating Config

percy-testcafe's People

Contributors

Stargazers

Watchers

Forkers

percy-testcafe's Issues

Issue

Workaround

Futher Reading

The problem

Environment

The problem

Recommend Projects

Recommend Topics

Recommend Org

Automatically with `@percy/migrate`

Installing `@percy/cli`