Percy snap shot test cannot be executed in Testcafe due to the error message: npm ERR! The script 'test:percy' is

For my initial test with percy snapshot, I used the command below:

npm run test:percy

Unfortunately, an error message appeared when running the command:

xxx.xxx@LPG002572 TC-Visual % npm run test:percy
npm ERR! missing script: test:percy

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/xxx.xxx/.npm/_logs/2020-04-06T16_11_45_122Z-debug.log
jacqueline.george@LPG002572 TC-Visual % npm run test:percy
npm ERR! missing script: test:percy

I double-checked my package.json and it seems to be correct. What mistake did I make and how can I resolve this issue?

{
  "name": "tc-visual",
  "version": "1.0.0",
  "description": "Visual testing with TestCafe and Percy.io",
  "main": "index.js",
  "scripts": {
    "test": "percy exec -- testcafe chrome ./tests"
  },
  "keywords": [
    "TestCafe",
    "percy"

  ],
  "author": "xxx xxx",
  "license": "ISC",
  "dependencies": {
    "@percy/testcafe": "^0.2.0",
    "testcafe": "^1.8.3"
  }
}
javascripttestingnpmnpm-installtestcafe

Answer №1

The main issue at the root of this dilemma lies within the 'tests' section of the package JSON file, where I accidentally omitted a crucial piece of information. This type of mistake is quite common and can happen to anyone. Therefore, if you are facing a similar problem, please proceed with caution when making changes to your package JSON file. As depicted in the revised code below, I have now included test:percy.

Please refer to the updated package JSON file containing the correct details.

{
  "name": "tc-visual",
  "version": "1.0.0",
  "description": "Visual testing with TestCafe and Percy.io",
  "main": "index.js",
  "scripts": {
    "test:percy": "percy exec -- testcafe chrome ./tests"
  },
  "keywords": [
    "TestCafe",
    "Percy"

  ],
  "author": "Author",
  "license": "ISC",
  "dependencies": {
    "@percy/testcafe": "^0.2.0",
    "testcafe": "^1.8.3"
  }
}

Answer №2

This solution worked perfectly for my issue.

$ percy run -- testcafe firefox ./tests
'percy' is not a recognized command, please make sure it is installed and added to your PATH.
error Command terminated with a non-zero exit code 1

.

Try installing Percy using yarn or npm with the following commands:
yarn add percy or npm install percy

I also had to install the Percy client after encountering this error message: Unsupported Percy CLI version, snapshots have been disabled.

npm install --save-dev @percy/cli

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Trying my hand at using JQuery to dynamically update the image source of a draggable element upon dropping

Essentially, I have an object being dragged with the class .dragme, a dropzone with the class .dropzone1 for it to be dropped at, and an image that I want the .dragme object to become once it has been dropped. My current code looks like this: $(".dropzon ...

javascriptjqueryimagejquery-uijquery-ui-draggable

Error: Cannot locate 'import-resolver-typescript/lib' in jsconfig.json file

Issue: An error occurred stating that the file '/Users/nish7/Documents/Code/WebDev/HOS/frontend/node_modules/eslint-import-resolver-typescript/lib' could not be found. This error is present in the program because of the specified root file for c ...

javascripttypescriptvisual-studio-codefrontendnext.js

By utilizing the window.history.back() function, it takes me four clicks to navigate back one page

I find it peculiar that my back button is using the JS method window.history.back() to return to the previous page. However, I have noticed a strange behavior with this button. When I click on it before the entire document loads, it functions as expected a ...

javascripthtml

Retrieving the checked value of a checkbox in Angular instead of a boolean value

Currently I am working on a project using ServiceNow and AngularJS. I am having trouble obtaining the value of a checkbox. Here is the code snippet: $scope.userFavourite = function(favourite){ alert(favourite); } <labe for="tea"& ...

javascriptangularangularjs

How come my FormData POST request isn't being blocked by CORS policy?

I am facing confusion with one query: why does my POST request, which sends form data from a frontend hosted on a different origin to a backend hosted on a different origin, not get blocked by CORS policy? My Node.js code includes the following: const exp ...

javascriptnode.jsapiaxiosmulter

Creating dynamic image carousels using the latest versions of Bootstrap and AngularJS

I have created an array that stores various images using angularJS: $scope.docImg = [ '../../Content/Image/BackGrounds/abra.png', '../../Content/Image/BackGrounds/background_black.jpg', '../../Content/I ...

javascripthtmlangularjsloopsbootstrap-modal

Search for and swap out every item in a multi-tiered array

I am working with an array where the first column represents an id: var mainarray = [ ["1001","P6","P8"], ["1002","P7"], ["1003","P7","P8","P10"], ["1004","P6","P10"], ]; My goal is to replace each 'P' element with its corresponding animal from ...

javascriptjqueryarraysstringmultidimensional-array

The animation for the accordion feature in the iOS Framework7-vue app seems to be moving at

I am encountering issues with the iOS app while developing both android and iOS apps with Framework7-vue. The Android app functions smoothly, but the iOS app is causing trouble. One of the features include a popup functionality with an accordion inside fo ...

javascriptvue.jsaccordionhtml-framework-7

Employ the $scope.go() method within a function written in JavaScript

I am working with some HTML code that looks like this <body ng-app="app" ng-controller="IndexCtrl" id="indexBody"> <h1>test</h1> </body> Next, in a JavaScript function, I retrieve the scope like so function myFx() { ...

javascripthtmlangularjscordova

Error message stating: "Node.js 'readline' - Mark-compacts near heap limit are not effective. Allocation failed."

Here's the process I'm following in the code: Primarily, I am engaging in web scraping tasks. I start by reading a text file containing approximately 3500 links. Next, I iterate through each link, filter out the ones I need, and make a request ...

javascriptnode.jsexpresshttprequestv8

Using Typescript to create an asynchronous function without explicitly declaring a Promise

When you examine TypeScript's async function, you may notice the redundancy with "async" and "Promise<type>". public async test(): Promise<string> { return "Test"; } Is there a way to configure TypeScript to handle async types ...

javascripttypescript

Discovering active path while utilizing dynamic routes - here's how!

Whenever I click on the project element in my HeadlessCMS with the URL /projects/slug-name, the projects button in my Navbar (LinkItem) does not highlight with a background color (bgColor). How can I modify this line of code: const active = path === href / ...

javascriptreactjsnext.js

Using the AJAX post method to generate a JSON object from database results and send it back to a jQuery UI Dialog

I wrote a script that loads sample images from the database based on the relevant category when the page loads. Here's a simplified version of the PHP script: <?php $category = 'granite'; $samples = 'SELECT * FROM material WHERE ma ...

phpjavascriptjqueryjsonjquery-ui

The express-fileupload throws an error saying "ENOENT: unable to locate the file or directory at 'public/images/name.ext'"

I am encountering an error ENOENT: no such file or directory, open 'public/images/name.ext from express-fileupload. I have searched for solutions to this issue, but none of the ones I found seem to work for me. Here are two examples: No such file or d ...

javascriptnode.jsexpress

What is the best way to utilize window.find for adjusting CSS styles?

Incorporating both AJAX and PHP technologies, I have placed specific text data within a span element located at the bottom of my webpage. Now, my objective is to search this text for a given string. The page consists of multiple checkboxes, with each check ...

javascriptajaxfind

Adding Data to a Database Using Ajax with PHP

I am trying to use Ajax to insert data into a database, but I keep encountering this error: Uncaught ReferenceError: insertData is not defined at HTMLInputElement.onclick (Modal.php:105) Error screenshot: The HTML and JS for this functionality are in ...

javascriptphpjqueryhtml

Using TypeScript, what is the best way to call a public method within a wrapped Component?

Currently, I'm engaged in a React project that utilizes TypeScript. Within the project, there is an integration of the react-select component into another customized component. The custom wrapped component code is as follows: import * as React from " ...

javascriptreactjstypescriptreact-select

The camera steadily advances in WebVR Cardboard using three.js technology, never stopping its forward movement

I've been experimenting with trying to create a smooth, continuous forward movement for the camera in a three.js/WebVR project, specifically with only a cardboard viewer needed. After much trial and error, I've discovered that the usual camera m ...

javascriptthree.jsgoogle-cardboardwebvr

The resizing issue persists with Angularjs charts

I have recently developed a small web application using AngularJS and I have implemented two charts from the AngularJS library - a bar chart and a pie chart. Although both charts are rendering correctly, they are not resizing properly as the display size c ...

javascripthtmlcssangularjsangular-chart

Efficiently rearranging elements by adjusting their top values techniques

My iPhone lockscreen theme features various elements displaying weather facts such as text and small images. Currently, these elements are positioned in the middle of the screen and I want to move them all to the top. Each element has a unique position abs ...

javascripthtmlcsspositioning