Using Puppeteer to create new question banks and get JSON of existing banks

This Puppeteer script both creates a new question bank and generates a JSON file with information about resulting question banks. The program is run by saying "node login4.js 2" - to use course_id.

const puppeteer = require('puppeteer');
const fs = require('fs');
const config = require('./config.json'); // contains username and password to use

// const delay = ms => new Promise(res => setTimeout(res, ms));
const course_id = process.argv[2];
if (!course_id) {
    throw "Please provide a course_id as the first argument";
}
console.log("course_id is ", course_id);

const login_url='http://'+config.canvas.host+'/login/canvas';

(async() => {
    const browser = await puppeteer.launch({headless: false, userDataDir: './puppeteer_data' });
    const page = await browser.newPage();
    await page.setViewport({
	width: 1280,
	height: 1024,
	deviceScaleFactor: 1,
    });
    await page.goto(login_url, {waitUntil: 'load'});
    console.log(page.url());

    // Type our username and password
    await page.type('#pseudonym_session_unique_id', config.canvas.username); // it you pass a third argument {delay: 100} - it will be similar to a user typing
    await page.type('#pseudonym_session_password', config.canvas.password);

    // Submit form
    await page.click('.Button.Button--login');

    //delay(3000);
    page.waitFor(3000); // the Dashboard does not render correctly in my Canvas instance, hence just wait and then go elsewhere

    // Go to the page for Question banks and Wait for the page to load
    qb_url='http://'+config.canvas.host+'/courses/'+course_id+'/question_banks'
    console.log("qb_url is ", qb_url);
    await page.goto(qb_url, {waitUntil: 'load'});
    console.log('FOUND!', page.url());
    
    const title="A new and interesting question bank"
    await page.$eval('#edit_bank_form #assessment_question_bank_title', (el, _title) => el.value = _title, title); // output the token just to see it

    const f1 = await page.$eval('form#edit_bank_form', form => form.submit());
    page.waitFor(3000);

    await page.screenshot({path: 'login4.png'});

    // Extract the results from the page
    const links = await page.evaluate(() => {
	let questionBanks = [];	// this will collect the question bank informatio

	const anchors = Array.from(document.querySelectorAll('.question_bank'));
	anchors.forEach(function(anchor) {
	    let jsonObject = {
		id: anchor.id,
		title: anchor.querySelector('.title').text,
		href: anchor.querySelector('.title').href,
            };
            questionBanks.push(jsonObject);
	});
	return questionBanks;
    });

    fs.writeFile('results.json', JSON.stringify(links), function(err) {
        if (err) throw err;
        console.log('complete');
    });

    browser.close();

})();

The program requires a configuration file of the form (in this program the access_token is not used):

{
    "canvas":{
        "access_token": "xxxxx",
	"host": "canvas.docker",
	"username": "xxxx",
	"password": "xxxxxx"
    }
    
}

The program generates a result file, such as:

[{"id":"question_bank_blank","title":"No Name","href":"http://canvas.docker/courses/2/question_banks/%7B%7B%20id%20%7D%7D"},

{"id":"question_bank_56","title":"A new and interesting question bank","href":"http://canvas.docker/courses/2/question_banks/56"},
{"id":"question_bank_52","title":"Test bank20","href":"http://canvas.docker/courses/2/question_banks/52"},
{"id":"question_bank_54","title":"Test bank21","href":"http://canvas.docker/courses/2/question_banks/54"},
{"id":"question_bank_55","title":"Test bank22","href":"http://canvas.docker/courses/2/question_banks/55"},
{"id":"question_bank_53","title":"Test bank23","href":"http://canvas.docker/courses/2/question_banks/53"},
{"id":"question_bank_1","title":"Unfiled Questions","href":"http://canvas.docker/courses/2/question_banks/1"}]

Question banks page before running the script or clicking "+Add banks":

Console output from the "+Add banks" button:

Question banks page after running script: