garris / garris/BackstopJS

How to Login Azure AD, take a Screenshot or create a test where im logged in

Open
#1,302 2 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
7.2k
Forks
621
PR merge metrics
No merged PRs in 30d

Description

Hello

Im trying to make a logon into Azure AD and take a screntshot.

I came up with this solution:
Scenario in backstop.json:

` {
"label": "DashboardTest",
"onBeforeScript": "puppet/get-aad-token.js",
"cookiePath": "aad-tokens.json",
"url": "http://localhost:3000/dashboard",
"readySelector": "#root > div.makeStyles-flexContainerFullWidth-11 > div > div > div.makeStyles-flexContainerFullWidth-11 > h4",
"misMatchThreshold" : 1,
"requireSameDimensions": true
}`

my onBeforeScript looks like this (inspired by https://gist.github.com/pieterdv/82773fbe036719479d76ab0a4985dc3b):
`// npm i puppeteer
const puppeteer = require('puppeteer');
const fs = require('fs');

module.exports = async () => {
const browser = await puppeteer.launch({ headless: false });
const page = await browser.newPage();
await page.setViewport({ width: 1200, height: 720 });
await page.goto('http://localhost:3000', { waitUntil: 'networkidle0' }); // wait until page load

await Promise.all([
page.click('#root > div.makeStyles-root-3 > header > div > button'),
page.waitForNavigation({ waitUntil: 'networkidle0' }),
]);

await page.type("#cred_userid_inputtext", "userName");
await page.type('#cred_password_inputtext', "password");
// click and wait for navigation
await Promise.all([
page.click('#cred_sign_in_button'),
page.waitForNavigation({ waitUntil: 'networkidle0' }),
]);

// await browser.close();

let aadValues = await page.evaluate(() => {
let values = {};
for (var i = 0, len = localStorage.length; i < len; ++i) {
if (
localStorage.key(i).startsWith("msal.") ||
localStorage.key(i).startsWith('{"authority":')
) {
values[localStorage.key(i)] = localStorage.getItem(
localStorage.key(i)
);
}
}

return values;
});
browser.close();

fs.readFile('aad-tokens.json', 'utf8', (err, data) => {
fs.writeFile('aad-tokens.json', JSON.stringify(aadValues), { encoding: 'utf8' },
(error) => {
if (error) {
console.log(error);
}
});
});

console.log(`aad-tokens.json updated`);
};`

- Open Browser
- Navigate to Azure AD through Login Button
- Enter Credentials
- Login
- Create/Update aad-tokens.json with relevant token infos
- Use the created json File as Cookie the tell the homepage we are logged in

But the tests results into a timeout and if i remove the readySelector i still see the login page.

What am i doing wrong? Or is there another way i can do the login?

Thank you in advance

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.