Develop Reference

Accessibility Testing using Pa11y 5 on a page with Popup / Overlay

I have a page that I'm able to get accessibility test report from Pa11y 5 using actions.
When I click on a button on that specific page, I get a popup/overlay, I would like Pa11y to sniff that popup/overlay page and report on accessibility metrics, but currently Pa11y 5 is only able to provide me for the main parent page ignoring any reports on the html in the popup page? Is there a way to achieve this, tell Pa11y to switch to popup and sniff on that popup html and report that.
Popup/overlay contains div[role='dialog'] as it is a modal dialog made out of aria.
I'm using the latest Pa11y, hence I keep mentioning it as Pa11y 5. I have not used Pa11y4, so cannot comment if this works with Pa11y 4.
Any help/advise is sincerely appreciated.
Update:
As requested, below is my complete (relevant) part of the code
const PageOptions1 = {
timeout: 30000,
userAgent: 'A11Y TESTS',
actions: [
'screen capture screenshots/001-DefaultView.png'
]
};
const PageOptions2 = {
timeout: 35000,
userAgent: 'A11Y TESTS',
rootElement: 'div[role="dialog"]',
actions: [
'click element button[data-automation-id="ccbutton"]',
'wait for element div[role="dialog"] to be added',
'screen capture screenshots/002-Popup.png',
'click element i.fa-close',
'screen capture screenshots/002-DefaultView.png'
]
};
async function runPa11y(navigateUrl) {
try {
const results = await Promise.all([
pa11y(navigateUrl, PageOptions1),
pa11y(navigateUrl, PageOptions2),
]);
LogResults(results);
} catch (error) {
console.error("Error: " + error.message);
}
}
runPa11y("Url to navigate");

Thanks for your updates! You're doing the right things and everything looks like it's working as expected.
Pa11y will perform all of the Actions before running your test, so it's opening the modal dialog, immediately closing it again, and then running the test without it.
Break PageOptions2 into smaller units so that your last Action is the state you want to test against, and everything should be ok.

Add custom screenshots to Jasmine report using Protractor

I am using protractor for the first time and doesn't know how to add custom screenshots to jasmine report.
Currently i am have done some thing like this.
onPrepare:
jasmine.getEnv().addReporter(
new Jasmine2HtmlReporter({
takeScreenshots: true,
takeScreenshotsOnlyOnFailures: false,
consolidate: true,
consolidateAll: true,
filePrefix: 'Report',
screenshotsPath: './screenshots/',
reportPath: './pageObject/reports/'
})
);
And added the code to take the screenshot.
browser.takeScreenshot().then(function (png) {
test.writeScreenShot(png,screenshotName+ '.png');
});
test.writeScreenShot = function(data,filepath){
var stream = fs.createWriteStream(path);
stream.write(new Buffer(data, 'base64'));
stream.end();
};
But now the actual pain comes in, it takes the snapshot of entire page and attach in report which i doesn't want and i want the custom snapshot which i have taken only for specific element and attach it in jasmine report.
I couldn't understand how the snapshot is added to the report . can some help me how the snapshot is added automatically to the report so that i can try once for the custom snapshot taken by me and try adding it to the report.
Thanks in advance.

Making screenshots of a certain area is not supported by selenium itself as far as I known. You can only make a screenshot of the visible page.
If you are struggling with screenshots, have a look at https://github.com/azachar/protractor-screenshoter-plugin
(disclaimer: I am the author of the fork)
You can make screenshots on each expectation. Also, it comes with an HTML-based report so it is easy to understand why your tests are failing.

Which javascript Automated Testing Tool to use

I am looking for an npm/javascript based Automated Testing tool with which I can test my website providing scripted input values and then for example clicking submit button on page etc.
So far I have tested Dalekjs but it seems to have lots of problems especially with Firefox, plus some CSS selectors are also not working even in other Browsers.
Is there any other good Automation testing tool that is npm based but does not necessarily require Selenium?

Nightmare.js
There's a really awesome tool called Nightmare.js. First it was a hight-level Phantom wrapper, but since v2 it was rewritten on Atom. Nightmare is webkit-based.
Nightmare can be executed headlessly, but you'll probably need to configure your server to get that working.
Why Nightmare? Here's a code sample from the official site:
Nightmare.js
yield Nightmare()
.goto('http://yahoo.com')
.type('input[title="Search"]', 'github nightmare')
.click('.searchsubmit');
Comparing to:
Phantom.js
phantom.create(function (ph) {
ph.createPage(function (page) {
page.open('http://yahoo.com', function (status) {
page.evaluate(function () {
var el =
document.querySelector('input[title="Search"]');
el.value = 'github nightmare';
}, function (result) {
page.evaluate(function () {
var el = document.querySelector('.searchsubmit');
var event = document.createEvent('MouseEvent');
event.initEvent('click', true, false);
el.dispatchEvent(event);
}, function (result) {
ph.exit();
});
});
});
});
});
So you'll have to write significantly less code.
BUT IT'S WEBKIT-ONLY
Selenium
In order to get something working in all browsers, take a look at Selenium. It supports really many browsers and platforms.
var webdriver = require('selenium-webdriver'),
By = require('selenium-webdriver').By,
until = require('selenium-webdriver').until;
var driver = new webdriver.Builder()
.forBrowser('firefox')
.build();
driver.get('http://www.google.com/ncr');
driver.findElement(By.name('q')).sendKeys('webdriver');
driver.findElement(By.name('btnG')).click();
driver.wait(until.titleIs('webdriver - Google Search'), 1000);
driver.quit();
Just a small advice Selenium tests are likely to be more "bulky" than nightmare tests and I've seen quite a lot "Promise hell" in Selenium tests on one of my previous jobs, so before you start, my advice to you would be to use of generators and co or some other control flow library.

try http://phantomjs.org/
It might be an excellent alternative to Dalekjs. Phantom.js is runnable without a UI, scriptable via JavaScript and is used for automating web page interaction. It's a WebKit with its own JavaScript API. It has fast and native support for most web standards: DOM handling, CSS selector, JSON, Canvas, and SVG. You can use scripted input values
Here is a sample usage:
console.log('Loading a web page');
var page = require('webpage').create();
var url = 'http://en.wikipedia.org/';
page.open(url, function (status) {
console.log('Page loaded');
page.render('wikipedia.org.png');
phantom.exit();
});

I also had a similar requirement, I did below investigation which would be helpful:

NightmareJS is actually based on PhantomJS. It works very well even for a non-dev. In reality automated testing truly depends on many situations and the type of application tested. You need a super fast way to visually see if changes to the code is affecting the app visually and also to some degree its logic. For logic there are many other frameworks for that like selenium frameworks. No need for complex coding as you want to be able to view the application or test results quick, modify the variable or elements that neeeds to be tested and verified.

Meteor: Authenticating Chrome Extension via DDP

I've built a Chrome Extension that takes a selection of text and when I right click and choose the context menu item, it sends that text to my Meteor app. This works fine, however, I can't figure out the process of using Oauth to authenticate users.
I'm using this package: https://github.com/eddflrs/meteor-ddp
Here is the JS within background.js (for Chrome Extension):
var ddp = new MeteorDdp("ws://localhost:3000/websocket");
ddp.connect().then(function() {
ddp.subscribe("textSnippets");
chrome.runtime.onMessage.addListener(function(message) {
ddp.call('transferSnippet', ['snippetContent', 'tag', snippetString]);
});
});
Here is the relevant portion of my other JS file within my Chrome Extension:
function genericOnClick(info) {
snippetString = [];
snippetString.push(info.selectionText);
var snippetTag = prompt('tag this thing')
snippetString.push(snippetTag);
chrome.runtime.sendMessage(snippetString);
}
And here is the relevant portion of my Meteor app:
'transferSnippet': function(field1, field2, value1, value2) {
var quickObject = {};
quickObject.field1 = value1[0];
quickObject.field2 = value1[1];
TextSnippets.insert({
snippetContent: value1[0],
tag: value1[1]
});
}
Basically I'm stuck and don't know how to go about making a DDP call that will talk to my Meteor app in order to authenticate a user

This question is a bit old, but if anyone is still looking for a solution. I had a similar problem that I was able to solve using the following plugin: https://github.com/mondora/asteroid. Here is an example of how to do it for twitter oauth:
https://github.com/mondora/asteroid/issues/41#issuecomment-72334353

Web site not working as expected with CasperJS

I'm using CasperJS 1.0.2 under PhantomJS 1.8.1 on Windows 8.
Trying to write a test for a web site. The site is heavily reliant on JS and the coding principals are quite unusual, which may be creating some problems but I'm not sure.
Here is the code I'm using to test login and search function:
var url = 'http://www.testsite.com/';
var casper = require('casper').create();
casper.start();
casper.start(url, function() {
this.echo('Page: ' + this.getTitle());
this.capture('start.png');
if (this.exists('input#TxtUserName')) {
this.sendKeys('input#TxtUserName', 'testlogin');
this.sendKeys('input#TxtPassword', 'testpass');
this.click('input#BtnLogin');
this.capture('loggedin.png');
}
});
casper.then(function() {
this.capture('beforesearch.png');
this.sendKeys("input#txtSearch", '1002');
this.click("input#cmdSubmit");
this.echo('Searching');
this.capture('aftersearch.png');
});
casper.run();
When I run this code, every page on the screen capture is the same with the exception that the login information is filled in on login.png. At no point does it actually login (using my real login credentials) after the click event. The search results also don't show after that click is fired.
Any clue what could be causing this?
Here is my waitFor code after submitting the search:
casper.waitForText("Part:", function() {
this.capture('searchresults.png');
});

You should use casper.waitFor to make sure the next page has been loaded. Otherwise phantom will take the screenshot before the form submit has been answered.