Exploring the process of retrieving JSON from an API using plain JavaScript within the Protractor framework

Question

Exploring the process of retrieving JSON from an API using plain JavaScript within the Protractor framework

I'm attempting to retrieve the distance between two locations using the TomTom API.

Unfortunately, I am facing an issue with Protractor:

When trying to use the *fetch function - I receive an error stating "fetch is not defined" and it advises me to use import instead.

Upon attempting to use *import, another error arises: "Cannot use import statement outside of module."

After adding { type: module } to package.json, Protractor ceases to function properly as the entire code is now recognized as a module of ES.

Additionally, when utilizing *browser.get, a JSON data page opens up but I encounter difficulty extracting the information from it.

Is there an alternative method I can explore? I've tried importing the JSON to a separate file and exporting response.data, however, the module error prevents me from proceeding with this approach as well.

javascript selenium-webdriver automation protractor

Answer 1

Answer №1

When it comes to testing angular webpages, Protractor is the tool of choice. However, you also have the flexibility to execute custom JavaScript using the browser. If you want to utilize the fetch function, make sure to access it through window.

function retrieveTomTomData() {
  // Replace this with your TomTom API call and data transformation
  return window.fetch(TOM_TOM_URL);
}

browser.executeScript(retrieveTomTomData).then(response => {
  // Process the response accordingly
});

Answer 2

When it comes to testing angular webpages, Protractor is the tool of choice. However, you also have the flexibility to execute custom JavaScript using the browser. If you want to utilize the fetch function, make sure to access it through window.

function retrieveTomTomData() {
  // Replace this with your TomTom API call and data transformation
  return window.fetch(TOM_TOM_URL);
}

browser.executeScript(retrieveTomTomData).then(response => {
  // Process the response accordingly
});

Answer 3

Answer №2

I was facing difficulties running node-fetch in my script due to Protractor rejecting the import. Eventually, I resolved it by using require 'https'

const https = require('https');

let measureDistance = async function(pickup, dropoff) {
    let url = `https://api.tomtom.com/routing/1/calculateRoute/${pickup[0]}%2C${pickup[1]}%3A${dropoff[0]}%2C${dropoff[1]}/json?routeType=shortest&avoid=unpavedRoads&key=uwbU08nKLNQTyNrOrrQs5SsRXtdm4CXM`;
    await https.get(url, res => {
        let body = '';
          
        res.on('data', chunk => {
            body += chunk;
        });
            
        res.on("end", () => {
            try {
                let json = JSON.parse(body);
                howFar = json.routes[0].summary.lengthInMeters;
            } catch (error) {
                console.error(error.message);
            }
        }).on("error", (error) => {
            console.error(error.message);
        });
    });
};

I also realized that putting require at the top of the file, similar to Ruby, was causing another issue.

Answer 4

I was facing difficulties running node-fetch in my script due to Protractor rejecting the import. Eventually, I resolved it by using require 'https'

const https = require('https');

let measureDistance = async function(pickup, dropoff) {
    let url = `https://api.tomtom.com/routing/1/calculateRoute/${pickup[0]}%2C${pickup[1]}%3A${dropoff[0]}%2C${dropoff[1]}/json?routeType=shortest&avoid=unpavedRoads&key=uwbU08nKLNQTyNrOrrQs5SsRXtdm4CXM`;
    await https.get(url, res => {
        let body = '';
          
        res.on('data', chunk => {
            body += chunk;
        });
            
        res.on("end", () => {
            try {
                let json = JSON.parse(body);
                howFar = json.routes[0].summary.lengthInMeters;
            } catch (error) {
                console.error(error.message);
            }
        }).on("error", (error) => {
            console.error(error.message);
        });
    });
};

I also realized that putting require at the top of the file, similar to Ruby, was causing another issue.

Exploring the process of retrieving JSON from an API using plain JavaScript within the Protractor framework

Answer №1

Answer №2

Similar questions

Code for a succinct MySQL query in PHP using associative arrays

Retrieve geographical coordinates from image metadata using JavaScript

Looking to set up an event handler for the browser's back button in next.js?

Having trouble accessing the value of an item in a dropdown box on a website

Looking to extract data from various checkbox options and save it as an array variable

The has-error class cannot be applied to certain input elements

Tips for simulating Axios requests in Jest

What is the best way to establish a limit on the number of characters that can be entered into an input field in a React form?

Run JavaScript code before finalizing the "submit" action within a Ruby on Rails application

Unable to display returned data from an AJAX request made with jQuery autocomplete

Sending data between Angular and Python using both strings and JSON formats

Neglecting to pass data to the controller through the onclick function

What causes the Element to be null in Vue.js?

Creating a dynamic Ajax-based widget for your website: A step-by-step guide

Adjusting the height of the Iframe dynamically every 2 seconds

How can I implement the self-clearing feature of a timer using clearInterval in ReactJS?

Sorting by two fields with varying value types in AngularJS

Could javascript be considered insufficient for conducting complex fluid simulations due to its speed limitations?

In the context of ReactJS, how should the src property be formatted within an img tag to reference a mapped json file correctly?

rendering json data as html using javascript