bassettsj/protractor-intercept

Simple protractor module to wrap XMLHttpRequest.open to intercept requests.

protractor-intercept

Simple Interception of the XMLHttpRequest on the current context.

Install

$ npm install --save protractor-intercept

Usage

var Intercept = require('protractor-intercept');

var intercept = new Intercept(browser);

describe('Intecept XHttpRequests', function() {
  it('can add the listener to your page', function() {
    browser.get('https://docs.angularjs.org/api');
    intercept.addListener();
    element(by.linkText('angular.isFunction')).click();
    intercept.getRequests().then(function(reqs) {
      //make some assertions about what happened here
    });
  });
});

License

MIT © Steven Bassett

protractor-intercept's Issues

Maximum call stack exceeded

Dependencies
"protractor": "5.1.2"
node v8.4.0

Error

(node:68426) [DEP0022] DeprecationWarning: os.tmpDir() is deprecated. Use os.tmpdir() instead.
[12:10:01] I/launcher - Running 1 instances of WebDriver
[12:10:01] I/direct - Using ChromeDriver directly...
Started
Spec started
F
  Application environment
    ✗ should have correct API url for production
      - Failed: unknown error: Maximum call stack size exceeded
  (Session info: chrome=61.0.3163.100)
  (Driver info: chromedriver=2.33.506106 (8a06c39c4582fbfbab6966dbb1c38a9173bfb1a2),platform=Mac OS X 10.12.6 x86_64)
      - Failed: unknown error: Maximum call stack size exceeded
  (Session info: chrome=61.0.3163.100)
  (Driver info: chromedriver=2.33.506106 (8a06c39c4582fbfbab6966dbb1c38a9173bfb1a2),platform=Mac OS X 10.12.6 x86_64)

Test

const APP_BASE_URL = require('../config').APP_BASE_URL;
const TEST_EMAIL = require('../config').TEST_EMAIL;
const protractor = require('protractor');
const open_listener = require('../common/http').open_listener;
const get_requests = require('../common/http').get_requests;
const remove_listener = require('../common/http').remove_listener;

class Interceptor {
	constructor(browser) {
		this._browser = browser;
	}

	add_listener() {
		return this._browser.executeScript(open_listener);
	}

	get_requests() {
		return this._browser.executeScript(get_requests);
	}

	remove_listener() {
		return this._browser.executeScript(remove_listener);
	}
}

const intercept = new Interceptor(browser);

describe('Application environment', function() {
	afterEach(function (done) {
		browser.executeScript(remove_listener);
	});

	it('should have correct API url for production', function() {
		browser.waitForAngular();
		browser.get(`${APP_BASE_URL}/home/login`);

		intercept.add_listener();

		element(by.css('input[type="email"]')).sendKeys(TEST_EMAIL);
		element(by.css('input[type="password"]')).sendKeys(<redacted-test-password>);

		element(by.css('button[type="submit"]')).click();

		intercept.get_requests().then((b) => console.log(b));
	});
});

Looks like the issue is get_requests. Digging around has lead me to believe there's an issue with serializing the information to send over to node. Currently unusable as is, though.

Getting javascript error: error reading property when calling .getRequests

I am getting an error trying to use this library for the first time.

When('the {string} button is clicked', async (buttonName: string) => {
  var Intercept = require('protractor-intercept');
  var ceptor = new Intercept(browser);
  await ceptor.addListener();
  await page.submitApplication(buttonName);
  await page.waitForSpinnerButtonFinish();
  let reqs = await ceptor.getRequests();
  console.log("Intercepted!! " + reqs);
  //TODO extract var from response
});

The ERROR I get looks like this, apparently on the line where .getRequests() is called:

When the "Submit Statemen" button is clicked # e2e/src/steps/my.steps.ts:61
   JavascriptError: javascript error: error reading property
     (Session info: headless chrome=90.0.4430.72)
     (Driver info: chromedriver=90.0.4430.24 (4c6d850f087da467d926e8eddb76550aed655991-refs/branch-heads/4430@{#429}),platform=Mac OS X 10.14.6 x86_64)
       at Object.checkLegacyResponse (/Users/s006746/Documents/GitHub/my/node_modules/selenium-webdriver/lib/error.js:546:15)
       at parseHttpResponse (/Users/s006746/Documents/GitHub/my/node_modules/selenium-webdriver/lib/http.js:509:13)
       at /Users/s006746/Documents/GitHub/my/node_modules/selenium-webdriver/lib/http.js:441:30
       at processTicksAndRejections (internal/process/task_queues.js:93:5)
   From: Task: WebDriver.executeScript()
       at Driver.schedule (/Users/s006746/Documents/GitHub/my/node_modules/selenium-webdriver/lib/webdriver.js:807:17)
       at Driver.executeScript (/Users/s006746/Documents/GitHub/my/node_modules/selenium-webdriver/lib/webdriver.js:878:16)
       at run (/Users/s006746/Documents/GitHub/my/node_modules/protractor/built/browser.js:58:33)
       at ProtractorBrowser.to.<computed> (/Users/s006746/Documents/GitHub/my/node_modules/protractor/built/browser.js:66:16)
       at Intercept.getRequests (/Users/s006746/Documents/GitHub/my/node_modules/protractor-intercept/src/index.js:14:26)
       at World.<anonymous> (/Users/s006746/Documents/GitHub/my/e2e/src/steps/my.steps.ts:67:27)
       at processTicksAndRejections (internal/process/task_queues.js:93:5)

Can see contents of AJAX request with one test, but not another?

I used this module to write a protractor test for submitting a form via post request which worked like a charm, I tapped into the third element of the requests object and there it was in the response part.

I'm trying to use it for another test using a post request, and I'm not seeing anything there. I'll have to look for other solutions but thought I'd scribble this up on the offchance you'd see it and could throw in a suggestion. I'd appreciate it!

About attaching the interceptor during page load

I am trying to log all HTTP requests that are made during a page load. I cannot reliably do it because I cannot attach the interceptor during page loa.

What would be a good strategy to attach this interceptor reliably during page load?