Page.evaluate() won't execute in a Promise chain - node.js

Question

Just started using Puppeteer. Trying to parse a page but the evaluate method won't work somehow.
var Browser
var Page
var Result
puppeteer.launch()
.then(function (browser) {
console.log('Browser Created\nCreating Blank Page')
Browser = browser
return Browser.newPage()
})
.then(function (page) {
console.log('Page Created\nVisiting URL')
Page = page
return Page.goto(URL)
})
.then(function (resp) {
console.log('Website Loaded')
return Page.evaluate(function () {
// Completely Sync Stuff
console.log('Evaluating Selectors')
var myElems = document.getElementsByClassName('challenge-type light')
Result = myElems
})
})
.then(function (val) {
console.log(Result)
console.log('Done! Exiting')
Browser.close()
process.exit()
})
.catch(function (err) {
Browser.close()
console.log(err)
process.exit(1)
})
Output :
Browser Created
Creating Blank Page
Page Created
Visiting URL
Website Loaded
undefined
Done! Exiting
What could possibly be the error? Would prefer a solution without async/await.
EDIT: "Evaluating Selectors" is not logged to the console as well, so the code never reaches there, is my concern.

Answer 1

I would double check that
document.getElementsByClassName('challenge-type light')
returns a result.
I believe you're using a headless browser, so sometimes elements may not load as you might expect.

Answer 2

Got the things working finally.
Console inside evaluate will be in page context, so that's the console of chromium page.
We need to return something from the evaluate function. DOM elements won't be returned as is because they lose context outside evaluate.
This worked :
.then(function (resp) {
console.log('Website Loaded')
return Page.evaluate(function () {
return document.querySelector('.cover-heading').innerText
})
})

Answer 3

OK you are on the right path but you have a few problems.
From your own answer: you noted that the console logs executed in the page context when they are executed in the evaluate method. You are correct in saying that but you are incorrect in saying that you can't return DOM elements from the evaluate method. You can just your code isn't quite correct.
So what you have is this:
.then(function (resp) {
console.log('Website Loaded')
return Page.evaluate(function () {
// Completely Sync Stuff
console.log('Evaluating Selectors')
var myElems = document.getElementsByClassName('challenge-type light')
Result = myElems
})
})
.then(function (val) {
console.log(Result)
console.log('Done! Exiting')
});
This won't work since you're trying to assign myElems to the Result variable inside the evaluate method. The evaluate method is executed in the browser. It has no idea that a Result variable exists in your puppeteer script. This is why your variable outputs as undefined at the end.
How to resolve this is as follows:
.then(function () {
return Page.evaluate(function () {
// Return the array of elements from inside the evaluate method
return document.getElementsByClassName('challenge-type light')
});
})
.then(function (elements) {
console.log(elements) // Will be your array of elements
});
Hopefully this helps!