Stub http-request in integration testing of js-app run with selenium - node.js

I do integration testing in my Vue SPA with webdriverio and cucumberjs.
When loaded my application does request to get data from api-server.
In my tests I'd like to modify / stub data returned from api-server without 'touching endpoint' (i.e. deny request and return my json).
Nock, moxios and others won't work as my application is loaded with selenium.
I am aware about json-server, wiremock, but I don't want to modify my source code (urls) just for testing purposes.
Ideally selenium / webdriverio should intercept request or add custom code to webpage and return my json.
What options do I have?

Selenium was designed for end-to-end testing and it doesn't provide any mean to mock/stub the requests.
But there're some ways to do so:
Launch the browser on a proxy server which will intercept the requests and mock or redirect them (see browsermob-proxy).
Launch the browser with a web extension to intercept and mock the requests.
You can either code your own web extension or you can use one like Wiremock extension if you are using Chrome/Chromium.
Inject some Javascript in the page to hook XMLHttpRequest.
Since Selenium doesn't provide a way to inject the code before page is loaded, it will only work on the requests triggered upon mouse/keyboard input.

Related

HTTP Calls integration pattern- Making HTTP calls directly from Javascript vs Axios vs Node, which is more secure?

A novice javascript developer here!
A have a basic question on whats the best and secured way to make HTTP calls from a front application to a backend service that needs an authentication. My application is a SPA (using Vue.js) & getting data from Java services. Java services need authentication details and return sensitive user data.
I see there are a few options and I wanted to understand a better approach amongst all 3-
Making direct HTTP calls from javascript code- Concern for using this approach is, as Javascript code can also be viewed via dev tools in browser, wont it be easier for anyone to do an inspect and view all critical authentication details hence making overall integration less secure?
Making an HTTP call using Axios via Vue framework- Seems like Axios is Promise based HTTP client for the browser that lets you easily make HTTP calls without much code overhead. but is this secure? is Javascript code loaded in the browser? Or the front end code sends the request and axios makes the request from backend server where the application is hosted?
Using Node- If front end application has unique routes configured for each API call and in my application if I have a route mapping to use request module and node js backend code to make those HTTP calls, is that going to be a robust and secure way of integration?
Please let me know your thoughts and apologies if this is a dumb question!
Not dumb at all. You're just learning.
My first question to your answer 😅 will be: is your application server-side rendered or it's sap + backend?
If it's server-side rendered then I would say it's secured since Node will be sending pages with all required data. On the dev tool, you will only see static files being loaded.
However, if it's SAP, I am not sure whether there is a way to hide whatsoever you send to the server from the dev tool. The only one thing you will need to do is to make sure you encrypt whatever is sensitive to your application.

Mocking Puppeteer Network Requests in SUT

Does anyone know how to mock network requests that Puppeteer makes when it is used as part of the system under test (but NOT to run the test)? For example, the system under test uses puppeteer to fetch a URL and return some information about the page. The test is run using Jest. I normally use nock for this but it seems that they aren't used by Puppeteer's network code.
You can use
page.setRequestInterception(true);
page.on('request),req =>{
req.respond(data);
})
I would put a proxy between your SUT and your test runner. I tried to use BrowserMob Proxy in the past but eventually found an alternative solution (definitely not applicable in your case) so I can't really help with this.
It may be worth trying to give it a shot:
BrowserMob Proxy allows you to manipulate HTTP requests and responses, capture HTTP content, and export performance data as a HAR file. BMP works well as a standalone proxy server, but it is especially useful when embedded in Selenium tests.

Send HTTP POST while testing native app with webdriverio

I'm testing a native ios/android app using a webdriverio boilerplate (https://github.com/webdriverio/appium-boilerplate) project as basis.
But for some scenarios I need to put a user with a precondition info, and for that i want to send a HTTP request to a webserver to set the info for that user.
There is any way to send a post wile using webdriverio an appium on native apps?
I'm trying to send the post after initialize the app but nothing seems to be happening...
You can make HTTP POST request using webdriverio. It doesn't matter what the mode of test(appium, selenium, cucumber, etc.,.)
Please try this answer if this helps:
How to use 3rd party method that takes callback in webdriverio

Submit form via headless browser - NodeJS

Due to an archaic stack, the response from a form submission is HTML. When rendered on my clients domain, the relevant information is injected in via a portlet. If you render the markup locally, the necessary content is missing. This makes it impossible for me to simply post data to the relevant form endpoint.
As a result of this, I need to submit a form and scrape the success/fail page for the necessary information in a headless browser.
I'm planning on wiring an API endpoint in my NodeJS application that I can post the form data to which in turn will submit the form in the headless browser and respond with the scraped content.
Are there any frameworks that would support this? I've looked at Nightwatch and Web Driver but they all seem to be aimed at automated testing rather than what I'm after.
Try using casper.js
It is a scripting and testing utility for use with Slimer.js (headless browser)

How to control web browser using some programming language?

I am looking for a way to control a web browser such as firefox or chrome. I need something like "selenium webdriver" but that will allow me to open many instances URL load, get http headers, response code, get response content, load time, etc.
Is there any library, framework, api that I could use to do it? I couldn't find one exactly that does all, selenium opens browser and go to url but I can't get http headers
Selenium and Jellyfish are strong options in general. Jellyfish is an option that uses Node.js - although I have no experience with it, I've heard good things from my colleagues.
If you just want to get headers and such, you could use the cURL library or wget. I've used cURL with NuSOAP to query XML web services in PHP, for example. The downside is that these are not functional browsers, and merely perform the HTTP requests and consume the response.
http://seleniumhq.org/
https://github.com/admc/jellyfish
http://curl.haxx.se/

Resources