What is the best way to retrieve JSON data from a raw.github URL and save it into a variable?

Suppose there is a JSON file named data.json on Github. The raw view of the file can be accessed through a URL like this: https://raw.githubusercontent.com/data.json (Please note that this URL is fictional and not real).

Assume that the URL contains JSON data structured as follows:

"users_1": [
  {
    "id": 1234,
    "name": "Bob"
  },
  {
    "id": 5678,
    "name": "Alice"
  }
]

How can I extract the entire JSON data from this URL and store it in a variable within a Cypress test? Cypress does not typically use Promises, which makes implementation challenging. In Typescript, my attempts so far look like this:

let users; // I want to store JSON data from the URL in this variable
const dataUrl = "https://raw.githubusercontent.com/data.json";

cy.request(dataUrl).then((response) => {
  users = JSON.parse(response); // This results in an error due to the type of response being Cypress.Response<any>
})

For my upcoming project where I transition from Protractor to Cypress, I intend to perform similar tasks. In a Protractor test, I extract JSON data from a Github file and store it in a variable using a Promise. I aim to achieve the same functionality with Cypress.

Answer №1

In my opinion, the best approach is to utilize response.body and ensure that it has been properly serialized.

When sending a request body, Cypress automatically sets the Accepts request header and encodes the response body based on the encoding option chosen. (https://docs.cypress.io/api/commands/request#Usage)

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

Jest does not support the processing of import statements in typescript

I am attempting to execute a simple test. The source code is located in src/index.ts and contains the following: const sum = (a, b) => {return a+b} export default sum The test file is located in tests/index.test.ts with this code: impor ...

Converting an Array of Objects into a single Object in React: A Tutorial

AccessData fetching information from the database using graphql { id: '', name: '', regions: [ { id: '', name: '', districts: [ { id: '', ...

Triggering an event from a component to its parent module resulting in an exception situation

Here is my app.component.ts code: import { Component, Input, OnInit, OnChanges, SimpleChanges} from '@angular/core'; import {Counter } from './counter' @Component({ selector: 'my-app', template: ` <custom-counter [ ...

What is the method for accessing the constructor type of an interface?

I am familiar with accessing a property type of an interface using interfaceName['propertyName'], but how can we access the constructor? For example: interface PromiseConstructor { new <T>(executor: (resolve: (value?: T | PromiseLike& ...

Element cannot be located following the addition of a className in the HTML document

When manually adding id, test-id or classname in an HTML file, it's important to note that Cypress may have trouble finding the element. For example, I have included 'Classname' here just for demonstration purposes. https://i.stack.imgur.co ...

Sending post parameters from Angular and receiving JSON data from PHP using $http

Exploring the world of Angular and delving into the realm of $http, I find myself faced with a perplexing challenge: How to post parameters using $http (necessary for PHP to execute the call) Retrieve a JSON response from that call Here's what I&ap ...

What are the steps for passing HTML tags from the view to the controller in CodeIgniter through AJAX utilizing JSON data type?

When trying to send a value from a textarea with HTML tags and inline CSS codes using AJAX with JSON as the datatype, I encountered an issue where it didn't return the exact HTML tags and styling. $('#add_course_form').submit(function(e) { ...

Is there a way to extract just the JSON data from res?

While creating a search functionality to display a list of users, I encountered an error when attempting to load additional pages to show more users: SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data var result = JSON.pars ...

Evaluate the data type of the response using Postman testing

Attempting to execute a Postman test to verify if the JSON data matches an integer value. This is what I attempted to run: { "passagiersnummer": 2021, "naam": "klaas van buren" } Here is the test setup: pm.test( ...

Managing status in Angular applications

I am currently working on a project using Angular 7 and I have the following code snippet: public deleteId(pId){ return this.http.delete<any>(this.deleteUrl(pId), {observe: 'response'}) .pipe(catchError(this.handleError)); } I ...

Is Json Patch in contradiction with the principles of REST?

Is it against REST principles to use Json Patch? Will my API still be considered RESTful if I implement it? { "op": "replace", "path": "/biscuits/0/name", "value": "Chocolate Digestive" } ...

Guide on incorporating a YouTube iframe in React with Typescript

It appears that Typescript is posing some challenges for me in this scenario. Here's the code snippet I am trying to include: <iframe width="560" height="315" src="https://www.youtube.com/embed/BLAH?showinfo=0" frameBorder="0" ...

When attempting to access Firebase Storage with Angular, you may encounter the error message: "TypeError: app.storage

Having trouble connecting my Angular app to FireBase. The component appears blank and the Chrome console is showing a 'TypeError: app.storage is not a function'. Any ideas on what I might be doing wrong? Thanks in advance. ng --version Angular C ...

Exploring different methods for drawing a polygon by iterating through JSON values

I am attempting to automatically draw a polygon using values stored in a database. The Python file I have returns JSON results to an AJAX call. In the AJAX success section, I need to iterate through the JSON data and automatically draw a polygon on a Googl ...

Encountering difficulties compiling Angular project

Error : PS C:\toolbox\intern-page> tsc C:\toolbox\intern-page\src\app\homepage\homepage.component.ts node_modules/@types/core-js/index.d.ts:829:20 - error TS2304: 'PromiseConstructor' cannot be foun ...

Struggling with bringing Json data into Azure Log Analytics

My objective is to import Microsoft Flow API data into Azure Log Analytics. The plan involves having a Power Automate send a JSON containing the details of the Flows to Log Analytics. Below is a sample JSON structure: { "body": [ { ...

Mastering Props Typing in React Using TypeScript

Currently, I am faced with the task of defining the following: interface MyCompProps { someAttr: number } Instead of having to explicitly list all the aria-* attributes I need upfront, I would like to simply use aria- and other normal HTML attributes ...

Node Express application experiences issues with Handlebars rendering additional empty objects from JSON arrays

Currently, I am attempting to retrieve data from a REST API call and display it as a list using Handlebars, which functions as my view engine in a Node Express App. Below is the route I am using: router.get('api/projects', function(req, res){ ...

NodeJS encountered an unexpected token 'u' while parsing

I have developed a ticketing system that involves collecting seat indexes in an array. However, when collecting these indexes with Node.js, they are stored as Objects which I then parse using JSON.parse. Below is the code snippet from my Angular Controlle ...

Encountering an ExpressionChangedAfterItHasBeenCheckedError in Angular 6 when selecting an option from a dropdown menu

How can we fix the error mentioned below through code changes? Situation An input dropdown UI is safeguarded against unintentional value changes by a modal. However, triggering an event (such as click or focus) on the dropdown leads to the ExpressionChan ...