I am trying to automatically test tracking code and I am using the RequestLogger from Testcafé. I succeeded to intercept calls to example.com and localhost but not to https://www.google-analytics.com/. What could be the reason?
Expected
This test should be green
Test code
import { RequestLogger } from 'testcafe';
const logger_ga = RequestLogger('https://www.google-analytics.com/');
fixture `localhost`
.page('http://localhost:8000')
test
.requestHooks(logger_ga)
('logs calls to Google Analytics', async t => {
await t.click("#ga-button");
console.log(logger_ga.requests); // is empty due to timing
await t.expect(logger_ga.contains(record => record.response.statusCode === 200)).ok();
});
Fixture for this test
I am serving the following index.html page via python -m SimpleHTTPServer 8000
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test page</title>
</head>
<body>
<p>Hello world!</p>
<!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
<script>
window.ga = function () { ga.q.push(arguments) }; ga.q = []; ga.l = +new Date;
ga('create', 'UA-XXXXX-Y', 'auto'); ga('send', 'pageview')
</script>
<script src="https://www.google-analytics.com/analytics.js" async defer></script>
<a onclick="ga('send', 'event', 'my_event_category', 'my_event_action', 'my_event_label');" href="#" id="ga-button">Google Analytics</a>
</body>
</html>
Observed
The above test is red
However, these tests are green
import { RequestLogger } from 'testcafe';
const logger = RequestLogger('http://example.com');
fixture `example`
.page('http://example.com');
test
.requestHooks(logger)
('logs calls to example.com', async t => {
await t.expect(logger.contains(record => record.response.statusCode === 200)).ok(); // green
});
const logger_localhost = RequestLogger('http://localhost:8000');
fixture `localhost`
.page('http://localhost:8000');
test
.requestHooks(logger_localhost)
('logs calls to localhost', async t => {
await t.expect(logger_localhost.contains(record => record.response.statusCode === 200)).ok(); // green
});
How can I intercept calls to Google Analytics successfully?
As Marion suggested it is probably due to timing. The following code works:
import { Selector, RequestLogger } from 'testcafe';
const gaCollect = 'https://www.google-analytics.com/collect';
const gaLogger = RequestLogger({gaCollect}, {
logRequestHeaders: true,
logRequestBody: true,
});
fixture `Fixture`
.page('http://localhost:8000')
.requestHooks(gaLogger);
test('Log Google Analytics call', async t => {
await t.click('#ga-button')
await t.expect(gaLogger.contains(record =>
record.request.url.match(/ec=my_event_category&ea=my_event_action&el=my_event_label/))).ok();
for(let r of gaLogger.requests) {
console.log("*** logger url: ", r.request.url);
}
});
The timing factor #Marion mentioned seems to play a role. Compare the previous with the following snippet and its output. Here, we do not see the calls logged to https://google-analytics.com/collect.
fixture `Fixture`
.page('http://localhost:8000')
.requestHooks(gaLogger);
test('Log Google Analytics call', async t => {
await t.click('#ga-button')
for(let r of gaLogger.requests) {
console.log("*** logger url: ", r.request.url);
}
await t.expect(gaLogger.contains(record =>
record.request.url.match(/ec=my_event_category&ea=my_event_action&el=my_event_label/))).ok();
});
Related
I am new to JS and TestCafe.
Using PageObjects in TestCafe my goal is to launch a login page and authenticate before running a test.
The .open call works fine from fixtures. Also from with .before.
fixture `Check for new emails`
.page `https://www.mail.com/myemails`
and
fixture `Check for new emails`
.page `https://www.mail.com/myemails`
.beforeEach(async t => {
console.log("before");
.page `https://www.mail.com/login`;
myloginScreen.performLogin();
})
test ('', async t => {
await t
console.log("In the test step");
});)
PageObject look like this:
import { Selector, t } from 'testcafe';
export default class LoginPage {
constructor () {
this.loginInput = Selector('input').withAttribute('id','email');
this.passwordInput = Selector('input').withAttribute('id','password');
this.signInButton = Selector('button').withAttribute('class','big-button');
this.userMenu = Selector('a').withAttribute('data-which-id', 'gn-user-menu-toggle-button');
}
async performLogin() {
console.log("function entered")
.typeText(this.loginInput, 'user#mail.com')
.typeText(this.passwordInput, 'password')
.click(this.signInButton);
console.log("Form submitted");
}
}
But I want to move the Login URL load to the PageObject like this:
async performLogin() {
console.log("function entered")
.navigateTo ("https://www.mail.com/login")
await t
.typeText(this.loginInput, 'user#mail.com')
.typeText(this.passwordInput, 'password')
.click(this.signInButton);
console.log("Form submitted");
}
The code calls the function fine but quits the .before and jumps to the test step.
I am not sure what I am doing wrong here, will appreciate any help.
The performLogin is an asynchronous method. So, you need to call it with the await keyword:
fixture `Check for new emails`
.page `https://www.mail.com/myemails`
.beforeEach(async t => {
console.log("before");
await myloginScreen.performLogin();
});
I'm using cypress to test my VueJS application. The one thing I'm having trouble with is mocking an image to be displayed on the page. For my use case, I'm simply loading a user profile with the following code:
describe('Test Login', () => {
it('Can Login', () => {
cy.server();
cy.route({
method: 'GET',
url: '/api/account/',
response: 'fx:profile.json',
});
cy.route('**/media/demo1.png', 'fx:demo1.png');
});
});
fixtures/profile.json
{
"avatar": "http://localhost:8080/media/demo1.png",
"username": "cypress",
"email": "email#cypress.io",
"pk": 1,
"is_staff": true,
"is_superuser": true,
"is_active": true
}
The profile fixture data is loading correctly in the test. In my fixtures folder, I also have a demo1.png file. I am expecting this image to be loaded and displayed on the page during my test, but it is being displayed as a broken image.
In the network tab, it shows demo1.png as a broken image with a 200 response code and type of text/html.
The cypress documentation mostly discusses images in the context of uploading images, but I haven't been able to find an example of how I can mock an image that is loaded through a <img> tag. Is there an easier way of doing this?
I am not sure if this answer can help you. But at least it is a workaround for this problem ;-)
Say we have a HTML like this:
<html>
<body>
<button id="button">load</button>
<div id="profile">
</div>
<script>
function httpGetAsync(theUrl, callback)
{
var xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
callback(JSON.parse(xmlHttp.responseText));
}
xmlHttp.open("GET", theUrl, true); // true for asynchronous
xmlHttp.send(null);
}
document.getElementById("button").addEventListener("click", () => {
httpGetAsync("/api/account/", (result) => {
var div = document.querySelector("#profile");
var img = document.createElement("img");
img.src = result.avatar;
div.appendChild(img)
})
})
</script>
</body>
</html>
source: HTTP GET request in JavaScript?
And you want to load the profile after the click was done. Then you can use MutationObserver to replace the img.src.
First, write the MutationObserver:
var observeDOM = (function(){
var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
return function( obj, callback ){
if( !obj || !obj.nodeType === 1 ) return; // validation
if( MutationObserver ){
// define a new observer
var obs = new MutationObserver(function(mutations, observer){
callback(mutations);
})
// have the observer observe foo for changes in children
obs.observe( obj, { childList:true, subtree:true });
}
else if( window.addEventListener ){
obj.addEventListener('DOMNodeInserted', callback, false);
obj.addEventListener('DOMNodeRemoved', callback, false);
}
}
})();
(heavily copy & pasted from Detect changes in the DOM)
Now you are able to do this:
describe('Test Login', () => {
it('Can Login', () => {
var win = null;
cy.server();
cy.route({
method: 'GET',
url: '/api/account/',
response: 'fx:profile.json'
});
cy.visit("index.html").then(w => {
cy.get("#profile").then(pro => {
var e = pro[0];
observeDOM(e, (m) => {
// add a red dot image
m[0].addedNodes[0].src = "data:image/png;base64,"+
"iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGP"+
"C/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YGARc5KB0XV+IA"+
"AAAddEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIFRoZSBHSU1Q72QlbgAAAF1J"+
"REFUGNO9zL0NglAAxPEfdLTs4BZM4DIO4C7OwQg2JoQ9LE1exdlYvBBeZ7jq"+
"ch9//q1uH4TLzw4d6+ErXMMcXuHWxId3KOETnnXXV6MJpcq2MLaI97CER3N0"+
"vr4MkhoXe0rZigAAAABJRU5ErkJggg=="
})
})
cy.get("button").click()
})
});
});
(yeah at least some lines of code are written on my own ;-P)
You can read the image from the img.src attribute from the fixtures folder. For the sake of simplicity I have used a static base64 string here.
And the result:
We are not using this kind of stuff in our aurelia app but I tried similar things in a private project some time ago.
I want to test content of the iFrame Tag using jest.
For e.g I have a small html file that shows google homepage in iframe.
I want to test that google homepage is coming in iFrame or not.
<!DOCTYPE html>
<html>
<body>
<h2>Google</h2>
<iframe src="http://www.google.com" style="border:none;"></iframe>
</body>
</html>
can someone suggest me that how can I test that iframe using jest ?
Thanks in Advance.
const fs = require('fs');
const path = require('path');
const html = fs.readFileSync(path.resolve(__dirname, './index.html'), 'utf8'); //--> get the file content
describe('Iframe Test Suit', function () {
beforeEach(() => {
document.body.innerHTML = html.toString();
});
it('Should load iframe content', function (done) {
const iframe = document.querySelector("iframe"); //--> get the iframe element
expect(iframe).toBeTruthy();
onLoad();
function onLoad() {
const iframeContent = iframe.contentDocument || iframe.contentWindow.document;
if (iframeContent.readyState == "complete") {
const input = iframeContent.querySelector("input");
expect(input).toBeTruthy();
done();
} else {
setTimeout(() => onLoad(), 100); //--> call again if iframe content is not loaded
}
}
});
});
By default, jsdom will not load any sub-resources like iframes. To load such resources you can pass the resources: "usable" option, which will load all usable resources.
jest.config.js
"testEnvironmentOptions": { "resources": "usable" }
Can someone help me understand how to pass data from post request to the nuxt page that is loaded. I dont know how to send the data to the page that will be loaded.
I want to be able to process the POST request, then send that data for usage on the following page. I am open to suggestions but I can't find proper documentation, tutorials or examples to accomplish this task.
I don't want to use axios here (with JSON type response), because I would prefer to send POST data and load new page. Therefor if page is reloaded, POST data must be submitted again.
const express = require('express')
const bodyParser = require('body-parser')
const { Nuxt, Builder } = require('nuxt')
const app = express()
const host = process.env.HOST || '127.0.0.1'
const port = process.env.PORT || 3000
// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: false }))
// parse application/json
app.use(bodyParser.json())
app.set('port', port)
// Import and Set Nuxt.js options
let config = require('../nuxt.config.js')
config.dev = !(process.env.NODE_ENV === 'production')
async function start() {
// Init Nuxt.js
const nuxt = new Nuxt(config)
// Build only in dev mode
if (config.dev) {
const builder = new Builder(nuxt)
await builder.build()
}
// Routes added
app.post('/events/booking', function (req, res, next) {
console.log('REQUEST:', req.body)
res.set('eventId', req.body.eventId)
res.set('moreData', ['some', 'more', 'data'])
next()
})
// Give nuxt middleware to express
app.use(nuxt.render)
// Listen the server
app.listen(port, host)
console.log('Server listening on http://' + host + ':' + port) // eslint-disable-line no-console
}
start()
I believe the source of your issue is the disconnect between Nuxt's implementation of Express, the deprecation/version-conflicts of bodyParser middleware and/or the Node event system.
I would personally take a step back by removing the custom express routing, handle the body parsing yourself in the middleware and take advantage of the Vuex store.
store/index.js
export const state = () => ({
postBody: null,
postError: null
})
export const mutations = {
postBody: (state, postBody) => {
state.postBody = postBody;
},
postError: (state, postError) => {
state.postError = postError;
},
}
export const getters = {
postBody: state => state.postBody,
postError: state => state.postError,
}
middleware/index.js
export default ({req, store}) => {
if (process.server && req && req.method === 'POST') {
return new Promise((resolve, reject) => {
req.on('data', data => resolve(store.commit('postBody', JSON.parse(data))));
req.on('error', data => reject(store.commit('postError', JSON.parse(data))));
})
}
}
pages/index.vue
<template>
<div>
<h1>Test page</h1>
<div v-if="postBody">
<h2>post body</h2>
<p>{{postBody}}</p>
</div>
<div v-if="postError">
<h2>post error</h2>
<p>{{postError}}</p>
</div>
<div v-if="!postError && !postBody">
Please post JSON data to this URL to see a response
</div>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
middleware: 'post-data',
computed: mapGetters({
postBody: 'postBody',
postError: 'postError'
})
}
</script>
Below is a live and working example project of the above. POST JSON data using a client app (Postman, web form, etc) to see the posted data rendered on the page.
Live Code: https://glitch.com/edit/#!/terrific-velociraptor
Live Example: https://terrific-velociraptor.glitch.me/
I created a pwa version of the site with a custom offline page using the service worker. When navigating through pages, they are added to the cache, and when they are visited again, it is shown from the cache.
When you click on a link and do not connect to the Internet and this page is not cached, an offline page is displayed.
There are 2 options to refresh the page:
When the Internet appears on the offline page, a link appears to
update the page.
When the Internet appears, return to any available page (home
page) and go to the desired page.
With the first option there is no problem. And with the second there is a problem in the safari.
The problem occurs when:
clicked on the link without an Internet connection and received an
offline page
The next time already with the Internet connection went on the same
link and again received an offline page, although it should show an online page
Steps to reproduce the problem:
go to the site with the Internet turned on
turn off the Internet
go to page1.html (an offline page is displayed)
go back to index.html (go home link)
turn on the internet
go back to page1.html (an offline page is displayed, but page1.html
should be displayed)
go to page2.html - everything works correctly, the online page loads
Who faced such a problem? It seems that the safari remembers request-response bunch and return the same result, regardless of the connection to the Internet.
'use strict';
const CACHE_VERSION = 1;
const BASE_URL = location.origin + '/';
const OFFLINE_URL = '/offline.html';
const CURRENT_CACHES = {
offline: 'offline-v' + CACHE_VERSION,
};
const URLS_TO_CACHE = [
BASE_URL,
OFFLINE_URL,
];
self.addEventListener('install', event => {
event.waitUntil(
caches.open(CURRENT_CACHES.offline)
.then(cache => {
return cache.addAll(URLS_TO_CACHE);
})
.then(() => {
return self.skipWaiting()
})
);
});
self.addEventListener('activate', event => {
let expectedCacheNames = Object.keys(CURRENT_CACHES).map(function (key) {
return CURRENT_CACHES[key];
});
event.waitUntil(
caches.keys().then(cacheNames => {
return Promise.all(
cacheNames.map(cacheName => {
if (expectedCacheNames.indexOf(cacheName) === -1) {
return caches.delete(cacheName);
}
})
);
})
.then(() => {
return self.clients.claim()
})
);
});
// fetch requests
self.addEventListener('fetch', event => {
const responsePromiseFactory = () => {
return caches.open(CURRENT_CACHES.offline).then((cache) => {
return cache.match(event.request).then(response => {
if (response) {
return response;
}
const fetchRequest = event.request.clone();
return fetch(fetchRequest)
.then(response => {
const responseToCache = response.clone();
if (!response || response.status !== 200 || response.type !== 'basic') {
return response;
}
cache.put(event.request, responseToCache)
return response;
})
})
})
.catch(error => {
return caches.match(OFFLINE_URL)
})
};
event.respondWith(responsePromiseFactory());
});
Tested on safari desktop v.11.1 and mobile safari ios version 11.3.1
I faced exactly same scenario and by adding the following headers in my offline page Safari now serves the online page when internet connection is available.
<head>
<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="pragma" content="no-cache" />
</head>