Playwright failing to execute GraphQL tests due to TypeScript configuration problems

I'm facing an issue with my repo where I am running tests using Playwright against a graphQL URL. Despite configuring the tests, there is an error indicating that the environment variable defining the environment cannot be found.

The repository in question can be accessed here - https://github.com/zac11/playwright-graphql-demo

Upon executing the command npm run test-new, the following output is displayed:

<<< ENVIRONMENT: undefined >>>

Although I have reviewed the code, I am unable to identify the root cause of the inability to pick up the correct environment setting.

There are numerous TypeScript complaints regarding the failure to import files with `.ts` extensions. The `tsconfig.json` file that has been added ought to rectify this, but I suspect this may be contributing to the recognition issue.

Please advise if there are any configuration discrepancies or missing elements within the code.

Below is the stack trace for reference:

   npm run test-new

> [email protected] test-new
> cross-env test_env=prod npx playwright test --config=playwright.config.ts --project=graphql


Running 5 tests using 1 worker

  ✘  1 [graphql] › graphql.spec.ts:16:5 › GRAPHQL DEMO › should list all teas (92ms)
<<< ENVIRONMENT: undefined >>>

<=============SENDING REQUEST==============>

 REQUEST URL: 
 

 REQUEST DATA: 
 query: { teas { id, name} }
  -  2 [graphql] › graphql.spec.ts:20:5 › GRAPHQL DEMO › should add new tea
  -  3 [graphql] › graphql.spec.ts:24:5 › GRAPHQL DEMO › should get new tea by name
  -  4 …aphql.spec.ts:28:5 › GRAPHQL DEMO › should verify that new tea is in the list of all teas
  -  5 [graphql] › graphql.spec.ts:33:5 › GRAPHQL DEMO › should delete newly added tea


  1) [graphql] › graphql.spec.ts:16:5 › GRAPHQL DEMO › should list all teas ─────────────────────

    Error: apiRequestContext.post: First argument must be either URL string or Request

       at ../helperMethods/api.helper.ts:54

      52 |     this.logRequestAPI(URL, data);
      53 |
    > 54 |     const response = await api.post(URL, { data});
         |                                ^
      55 |     const status = response.status();
      56 |     const respJson = await response.json();
      57 |   

        at GrapQLService.getAllTeas (/UserDir/playwright-graphql-demo/helperMethods/api.helper.ts:54:32)
        at /UserDir/playwright-graphql-demo/tests/graphql.spec.ts:17:9

    attachment #1: trace (application/zip) ──────────────────────────────────────────────────────
    test-results/graphql-GRAPHQL-DEMO-should-list-all-teas-graphql/trace.zip
    Usage:

        npx playwright show-trace test-results/graphql-GRAPHQL-DEMO-should-list-all-teas-graphql/trace.zip

    ─────────────────────────────────────────────────────────────────────────────────────────────

  1 failed
    [graphql] › graphql.spec.ts:16:5 › GRAPHQL DEMO › should list all teas ──────────────────────
  4 skipped

Answer №1

One potential solution is to include the URL as a command line argument in the following manner:

URL=https://examplewebsite.com npm run test

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

Load the flexslider once the fancybox container is opened

In my experience, I have found flexslider and fancybox to be very useful plugins. Individually, they work perfectly fine on a website that I am currently working on. However, when I tried placing a flexslider gallery inside a fancybox div, I encountered a ...

The issue of memory leakage in Three.js

I have come across an unusual memory leak in three.js (r73). Here are the steps to reproduce it: 1) Go to the following link using Google Chrome (version 46.0.2490.80 m) 2) Open DevTools -> Profiles -> Take Heap Snapshot. Check out my screenshot be ...

Obtaining the component instance ('this') from a template

Imagine we are in a situation where we need to connect a child component property to the component instance itself within a template: <child-component parent="???"></child-component1> Is there a solution for this without having to create a sp ...

What is the best way to generate a variable amount of div elements with constantly changing content using Angular2?

I'm not entirely sure on the process, but I believe ngFor would be used in this scenario. Essentially, my goal is to generate the following div multiple times, with each iteration updating the value inside the brackets from 0 to 1, 2, and so forth... ...

Establishing a bidirectional binding directive attribute within an AngularJS HTML structure

I'm new to AngularJs and I've encountered a problem that might be due to my lack of understanding about directives, controllers, and isolated scopes. I'm trying to figure out how to set a directive attribute to true/false in the html and kee ...

How can Array.map() be combined with D3 selection?

Is there a way to calculate the maximum length of text elements in an SVG selection similar to using Array.map()? Currently, I am retrieving the maximum length of a selection of SVG <text/> elements by utilizing .selectAll(...)[0].map(...), but it fe ...

Having trouble getting my Leaflet map to display even after meticulously following the quick-start guide

I am experiencing an issue where the map is not displaying at all, leaving a blank space where it should be. Despite following Leaflet's quick-start guide, I have been unable to determine the cause of this problem. Here is the code that I currently h ...

The function being called within useEffect is rendering too quickly, causing it to break. However, it functions correctly after

When using React-id-swiper to load images for products, I encountered an issue with setting the useState 'loading' state to false after all images have been successfully loaded. In this case, there are 5 products. To achieve this, I implemented ...

React: Issue with function not recognizing changes in global variable

When the run button is clicked, it triggers an event. However, clicking on the skip button does not take me to Switch Case 2 as expected. Even though the skip state updates, the function still outputs the old value of skip. const CustomComponent = () => ...

Webpack is struggling to locate core-js paths when running on Windows operating systems

When running webpack, I am encountering the following errors: ERROR in ./node_modules/core-js/index.js Module not found: Error: Can't resolve './es' in 'pathtoproject\node_modules\core-js' @ ./node_modules/core-js/index. ...

The controls for the Bootstrap carousel component do not have a clear appearance

Trying to implement a Bootstrap carousel component but facing an issue with the controls not appearing transparent like in the example provided in the Bootstrap documentation. Check out the code snippet: <div class="carousel slide" id="s ...

Is it possible to retrieve the child state value in the parent component using useRef in ReactJS with TypeScript (hooks)?

I am currently learning Typescript and I am trying to figure out how to pass child state values to the parent component using a ref when a button is clicked in order to update the reducer values. However, I keep running into errors when I try to pass a ref ...

The returned response from GraphQL is displaying [Object] instead of the expected data

Recently delving into GraphQL and utilizing it to fetch data from the Wordpress API. While crafting a query in the GraphiQL Wordpress IDE, the data is displayed correctly. However, upon integrating the query into my NEXTJS application and logging the resul ...

Leveraging Angular 2 directives in TypeScript to bind a value from a custom control to an HTML control

I have created a unique custom directive named "my-text-box", and within this directive, I am utilizing the HTML control <input>. I want to pass values from my custom control to the HTML input control. In Angular 1, I would simply do something like & ...

What is the best way to make the SPA load with the tab displaying the highest value?

I have a React single-page application using Typescript and Material UI. One challenge I'm facing is creating a tab menu with the current month and all previous months, where the last month should be active when the page loads. Despite researching on ...

Failed to access the 'totalQty' property as it is undefined

I have developed a cart object that can hold products in a shopping cart. The issue arises when an item is undefined before it gets added to the cart. How can I ensure that the cart is defined even when it's empty during the session? I am using ejs. ...

The functionality of the remove button in the jQuery Dropzone seems to be malfunction

I devised a user-friendly drag and drop feature for uploading images using the dropzone plugin. Here is the code snippet that I implemented: <script src="<?php echo base_url() ?>acc/assets/dropzone/dropzone.js"></script> <form actio ...

Tips for customizing the appearance of the day button in a React Material-UI date picker

In my React project, I am using material-ui date picker and I am looking for a way to customize the styling of the day buttons. Specifically, I want to change the text color of the available days. By default, as seen in the screenshot, the text color is bl ...

Linking numerous promises generated by a for loop

After delving into the concept of promises through this resource, I grasped the fundamental idea behind it. var parentID; $http.get('/api/user/name') .then(function(response) { parentID = response.data['ID']; for (var i = 0; i ...

Seeking assistance with exporting a Vue single file component that relies on Swiper.js for functionality

I'm having trouble figuring out how to properly export a Vue SFC that includes the mySwiper object. I would appreciate seeing an example from someone who has experience with this. Below is the JavaScript portion of my SFC <script> import Swiper ...