Having difficulty executing the playwright tests

Trying to execute the playwright test from the specified location results in a message prompting to run npm install -D @playwright/test before running the test. Despite having already installed playwright as a dev dependency, the test is still not being executed successfully. Any insights on what might be causing this issue would be greatly appreciated.

Attempts made so far:

1)

Test User@TestUser MINGW64 /c/Test
    $ npx playwright test --headed
    Please install @playwright/test package to use Playwright Test.
      npm install -D @playwright/test
  1. Test User@TestUser MINGW64 /c/Test $ npx playwright test Please install @playwright/test package to use Playwright Test. npm install -D @playwright/test

// test/test1.spec.js

const { test, expect } = require('@playwright/test');

test('basic test', async ({ page }) => {
  await page.goto('https://playwright.dev/');
  const title = page.locator('.navbar__inner .navbar__title');
  await expect(title).toHaveText('Playwright');
});

//package.json

{
  "name": "play",
  "version": "1.0.0",
  "description": "Playwright test",
  "main": "index.js",
  "directories": {
    "test": "test"
  },
  "dependencies": {},
  "devDependencies": {
    "@playwright/test": "^1.16.1"
  },
  "scripts": {
    "test": "npx playwright test"
  },
  "author": "Test",
  "license": "ISC"
}

https://i.sstatic.net/VxVi9.png

Answer №1

After encountering a problem, I came across some helpful suggestions listed here

  1. The first suggestion was to remove the playwright module.

    npm rm playwright

    npm install @playwright/test -D

  2. Another recommendation was to use yarn instead of npm.

    npx playwright test should be changed to yarn playwright test

  3. To address the issue in my Gitlab pipeline, I added the following code to my .gitlab-ci.yml.

cache:
  key: ${CI_COMMIT_REF_SLUG}
  paths:
    - node_modules/

Answer №2

Despite attempting the solutions provided above, I found that none of them were effective for me right away. Instead, I came up with a workaround that proved to be successful in my case.

Here are the steps I took:

  • Uninstall playwright and playwright-chromium using npm
  • Manually remove the @playwright/test line from the dev dependency section of the package.json file
  • Update npm
  • Reinstall @playwright/test as a dev dependency

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

When submitting a form with a contenteditable div and text box using JQuery, the POST request is not

I developed a website that allows users to edit and format text, then save it onto the server. Utilizing jquery to send the data to a PHP page for saving, I encountered an issue where the site fails to send the file name along with the formatted text to PH ...

React-file-viewer shrinks any document to a compact size

I have been searching extensively for information on how to adjust file sizing in react-file-viewer without any success. My objective is to utilize the react-file-viewer to allow users to click on a filename hyperlink and open the file (be it an image, do ...

How to move a div beneath the JavaScript files in Drupal 7

I am facing a challenge where I need to position a div right above the body tag without interfering with the scripts located above it. Despite my efforts, I have not been successful in achieving this goal. I attempted to use Hook_page_build to position t ...

Take away the CSS class from an element after reCAPTCHA verification is complete in Next.js

I'm struggling with removing the CSS class btn-disabled from the input button element upon successful verification of a form entry. I have implemented a function called enableForm to remove the btn-disabled CSS class when reCAPTCHA is verified. Howe ...

You cannot nest a map function within another map function in React

Having some trouble applying the map function in HTML using React. Below is the code snippet: response = [ data : { name: 'john', title: 'john doe', images: { slider: { desktop: 'link1', mo ...

Modify the properties of a particular component

I have an array of rooms filled with data: const room = (<Room points={points} scene={this.scene} key={this.rooms.length} keyV={this.rooms.length} />) this.roomData.push(room); For example, I now have 3 rooms each with their ...

The application is failing to launch following an upgrade to PostCSS version 8 in a React environment

While working on my app, I discovered that I had 80 vulnerabilities. These vulnerabilities were mainly due to peer version mismatches, such as one package requiring React 16.8.0 while I had 17.0.1. However, there was one vulnerability that caught my attent ...

What could be causing the issue of rows being undefined?

Need help creating a user registration feature with Passport(Local-Signup)? Check out the code snippet below: // config/passport.js // requiring necessary modules var LocalStrategy = require('passport-local').Strategy; // loading the user mode ...

Ways to display or conceal multiple div elements using JavaScript

A group of colleagues and I are currently collaborating on a project to create a website showcasing our research. We have incorporated 1 page that contains detailed descriptions of six different subjects: system biology, proteomics, genomics, transcripto ...

Encountering an issue in Angular 8 flex-layout 8: Unable to export member ɵNgClassImpl

I encountered an issue while trying to install flex-layout 8.0.0-beta.26 in my Angular 8 project. The error I received during the build process is as follows: ERROR in node_modules/@angular/flex-layout/extended/typings/class/class.d.ts(9,19): error TS2305 ...

Extracting specific key-value pairs from JSON data

Working with JSON data, I encountered a need to pass only specific key-value pairs as data to a component. Initially, I resorted to using the delete method to remove unwanted key-value pairs, which did the job but left me feeling unsatisfied. What I truly ...

Add an array into another array using a for loop, with the first result being duplicated

In this loop, I am facing an issue while trying to insert an array into another array. Here is the code snippet: function convertFormToArray(form){ var temp={}; var question={}; var allQuestions=[]; for (i = 0; i < form.length; i++ ...

"Simultaneously updating the UpdatePanel, triggering a JavaScript postback, and modifying the querystring in a SharePoint Search

Struggling with a tricky issue here. Let me try to clarify: I have a SharePoint results page where I'm using a Search Results Core WebPart. Now, I want to modify the parameter in the querystring upon postback so that the WebPart displays different re ...

Combining all elements of my application into a single HTML, JS, and CSS file

My AngularJS app has a specific structure that includes different directories for each component: theprojectroot |- src | |- app | | |- index.html | | |- index.js | | |- userhome | | | |- userhome.html | | | ...

Exploring the various possibilities of establishing multiple types of many-to-many relationships between two tables using Sequelize technology

Working with Sequelize in Node, I am dealing with Users and items. A user can interact with an item in various ways, such as voting or commending, which are distinct actions in this scenario. Initially, I considered having two separate many-to-many relati ...

Is it possible to invoke the created() function in Vue from another method?

Currently, I am developing an application in Vue. Upon loading the page, a cookie containing the user's zip code is retrieved and used to perform a search. However, users should also have the ability to change their zip code if it is incorrect. I woul ...

In what way does ReactJS enable me to utilize constant functions before they are declared?

I'm intrigued by the concept of using a value before defining it in ReactJS. Let's explore this through an example: function CounterApp() { const [counter, setCounter] = useState(0); const increaseValueTwice = () => { increaseValue() ...

Determining if a replacement took place in the Javascript replace function

I've developed a function that scans through a set of strings and replaces specific patterns: var content = 'Here is a sample string 1/23'; var currentDate = new Date(); var currentMonth = currentDate.getMonth()+1; var currentDay = curre ...

Simple methods to minimize the iteration of array loops in Node.js

First, retrieve the "grid_id" from the "grids" array ( Step 1 ) Next, verify if this "grid_id" is present in the "variationsDB" array ( Step 2 ) Once you have this "grid_id", use it to fetch the "var ...

Using multiple GET methods on a single route in Express and Sequelize can lead to conflicts

I've created a simple product CRUD application with routes to search for products by ID and by name. However, when I send a request to http://localhost:4000/products?name=pen, the routes conflict with each other and I'm unable to retrieve the pro ...