BackstopJS icon indicating copy to clipboard operation
BackstopJS copied to clipboard

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

Open mblasco1 opened this issue 4 years ago • 2 comments

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

mblasco1 avatar Apr 20 '21 20:04 mblasco1

Does this work if you manually generate the cookies file?

garris avatar Apr 20 '21 20:04 garris

Nope, doesnt work either. Also the manually generated cookie looks different. I manually logged in and extracted the cookie with the tool you suggested in documentation.

mblasco1 avatar Apr 21 '21 09:04 mblasco1