Accelerate frontend development with these Requestly features

Requestly helps accelerate frontend development & testing. Requestly helps reduce dependency on backend developers, environments, and QAs to make their frontend development cycle faster. In this article, we will talk about the most important features of Requestly that you can learn quickly and save ~2 hours every week and, more importantly, ship your code faster with confidence.

Here are some important Requestly Features:

Setup Redirects (URL Rewrite | Map Remote | Map Local)

Requestly App → HTTP Rules → Redirect Rule

Redirect Rule helps you set up client-side 307 redirects from one endpoint to another endpoint. This can be used for the following use cases –

  1. Redirect JS/APIs from Production to Local Environment (Map Remote) .. Read More
  2. Redirect HTTP calls to local system files (Map Local) … Read More
  3. Redirect Backend/Third Part API calls to mock server. … Read More

This feature is also very helpful when your JS is deployed on external websites (e.g., your customer’s website); you can use the Redirect Rule to swap the script invoked by your customer’s website with the script running on your local machine or your staging server.

Redirect Rule helps you test your local JS/API changes very quickly without deploying them on the production environment.

More Details → DocumentationDemo Video

Swap HostNames (Replace Rule)

Requestly App → HTTP Rules → Replace Rule

Replace String rule works like typical “Find & Replace” feature of text/code editors. You just need to define search string and replace string under “Replace” & “With” respectively.

Following are the popular use cases –

  1. Replace prod.checkout.company.com with stag.checkout.company.com to test prod application with a staging service. .. Read More
  2. Replace api.thirdparty.com with mock_server.requestly.tech to redirect third party api calls to mock server (Learn how to create API Mocks), without modifying your application. .. Read More
  3. Replace .min.js With .js to debug with non-minified versions of Java Scripts.
More Details → DocumentationDemo Video

Modify Request & Response Headers

Requestly App → HTTP Rules → Modify Headers

Modify Headers rule helps you add, remove or override existing headers in a few clicks. Simply define the Source condition and add header modifications as key-values. This can be used in following cases –

  1. Bypass CORS error by modifying values of Access-Control-Allow-Origin & other in response headers .. Read More
  2. Remove Content-Security-Policy header to add external scripts to a web page .. Read More
  3. Modify Authorization Headers to bypass the authentication while testing .. Read More
  4. Open web pages in iFrame by removing/modifying X-Frame-Options & Content-Security-Policy .. Read More

Modify Headers rule is very helpful in bypassing CORS to test local script on prod environment without any deployment.

More Details → DocumentationDemo Video

Override API Request Body / Payload

Requestly App → HTTP Rules → Modify Request Body

This rule helps in changing the request body/payload with static data or dynamic(programatic) payload based on the conditions like URL, Hostname or Path. Use source filters if you want conditions on Resource Type(like XHR, JS, CSS, Image etc) & Method(GET, POST etc). Some of the popular use cases are as follows:

  1. Test Edge cases during API testing by sending different types of data .. Read More
  2. Send additional data in an API to test different scenarios .. Read More
  3. Run negative test cases by sending invalid or large amount of data in a request body .. Read More
  4. Modify GraphQL: GraphQL queries can be modified and tested with Requestly .. Read More

GraphQL Support is available in Requestly, HTTP Rules can be used to debug GraphQL APIs.

More Details → Documentation

Override API Response Body

Requestly App → HTTP Rules → Modify API Response

Modify API Response rule helps in modifying the response body of the requests with static or dynamic(programatic) payload. This rule also helps in changing the status code of the response, which comes in handy in various use cases. Few of them are listed below:

  1. Work on Front-end while back-end is still under development. Read more
  2. Test the application behaviour in different scenarios of returned data. Read more
  3. Simulate errors by returning different error codes. Read more
  4. Speed up the development by caching responses on local and reduce the response time of slow staging servers.

This feature helps in your Agile Development goals by making Front-end and back-end team independent. It also helps in Functional testing by allowing modification of status codes and dynamic responses to cover all the edge cases, which are difficult to replicate in real scenarios.

More Details → DocumentationDemo Video

Inject Scripts & Stylesheets

Requestly App → HTTP Rules → Inject Script

Using Insert Scripts Rule, you can make on-the-fly changes to a webpage content. It allows you to automate, scrape & change webpages behaviour without needed to access the page source code. Below are some of the popular use-cases:

  1. Inject popular libraries or hosted scripts or execute custom code-snippet before or after page load using a simple rule builder. Read more
  2. Create custom or personalized demos by injecting your JavaScripts & CSS’s in customer’s websites. Read more
  3. Test custom code on Prod website, without deploying. Read more

You can test third party widgets on your website using Inject Script Rule with just few clicks.

More Details → DocumentationDemo Video

Override GraphQL Query & Response

Requestly App → HTTP Rules → Modify API Response

Modify API Response rule helps in testing GraphQL APIs by defining a matching condition based on URL, Host or Path along with GraphQL operation to override. If the graphQL queries matches the condition defined it will be served with the response configured in Requestly. The following are the popular use cases:

  1. Test query performance optimisation by reducing the time of query, application behaviour can be analysed. Read more
  2. Minimise query size by removing unnecessary fields and arguments and their impact on the application. Read more
  3. Modify queries to use fragments & aliases more effectively and observe the impact on overall performance. Read more

More Details → Documentation

Creating API Mocks

Requestly App → Mock Server

Mock Server helps in creating API mocks which are required in day to day development, it can be internal APIs which are still under development or an unreliable third party API. Mock APIs can be created easily by entering the path, method, status code, response header & response body. It can be used for following use cases –

  1. Develop frontend with mocked backend APIs, while BE APIs are in development parallel. Read more
  2. Test third party APIs integration using mock APIs without touching third party service. Read more
  3. Run CI/CD pipelines with mocks of third party APIs. Read more
  4. Test application behaviour in slow responses by adding latency to the responses. Read more

More Details → DocumentationDemo Video

Creating developer-friendly bug reports by Recording browser sessions

Requestly App → Sessions

If you are testing a website or just surfing something online and found a bug in the interface like clicking a button not working, page not loading properly etc. SessionBook makes the reporting and debugging such issues such an easy process that bugs are reported and fixed in no time. It includes screen recording, network logs, console logs & environment details.

Following are some of the popular use-cases among Requestly users:

  1. QA teams configure sessionbooks to automatically record activities on the websites they are testing. They report bugs with sessions replay links as they stumble upon a bug. Read more
  2. Developers ask for recorded sessions when they are not able to reproduce a bug using the reproductions steps as in some cases bugs are specific to a given system or user. Read more

Teams have observed 90% reduction in bugs resolution time after using Sessionbook for bug reporting.

More Details → DocumentationDemo Video

API Client (Send API Requests like Postman)

Requestly App → API Client

API Client helps you to easily test your API responses by hitting the API endpoints directly from Requestly without relying on your browser or client app. To hit an API endpoint and see the response, you need to specify the URL and other request attributes like method, query parameters, body and headers. Following are some use-cases –

  1. Check the response of an API based on different inputs. Read more
  2. Replay an old API request from history. Read more
  3. Import API Requests from Curl. Read more

More Details → Documentation

Requestly APIs - Creating HTTP Rules via API

The Requestly API endpoints let you integrate Requestly into your CI/CD Pipelines. It allows you to create and work with your rules.

  • You can add, update, delete, and read rules with the API.
  • Programmatically access data stored in your Requestly account
  • Integrate Requestly with your CI/CD workflow.
  • Easily test changes related to a PR without needing a staging environment Automatically create staging JS bundles on PR creation followed by creating a Requestly Rule programmatically using Requestly API in a team workspace. The user can then name the rule depending on their PR name.
  • Streamline developer and QA testing flows & if coupled with sessions recording your whole SDLC is optimised.

More Details → Documentation

Collaboration (Team Workspaces / SharedLists)

Shared Workspace allows you to collaborate with your team and work together in real-time on your rules. Workspaces can be helpful in multiple ways following are some of the important areas where they come handy –

  • Teams can collaborate on same set of rules in real-time, ensuring everyone is on the same page.
  • Mock APIs are shared across team members reducing the time consuming export-imports and syncing.
  • Access to Session recordings are available to team members only eliminating the security risk of sharing outside.

Workspaces comes with its own User Roles, providing 360 degree control over the workspaces.

More Details → DocumentationDemo Video

This article was written by:

Abhishek Sachan

Abhishek Sachan

Abhishek is Growth Engineer at Requestly and has profound love for programming.

Share this article:

You may also like