I have written an application that goes to a webpage and takes a screen shot of a small portion of that page.
The app uses headless puppeteer to navigate to a page like the following two examples and then takes a screen shot of one of the “match” grids on the page:
- Iron Mosquitos - Team 5653 - The Blue Alliance (selector = “#\32 022mnst > div.col-sm-8”)
- The Ravonics Revolution - Team 1710 - The Blue Alliance (selector = “#\32 022new > div.col-sm-8”)
In example 1, I have no issues and the screen shot is returned as a png file. In example 2, the screen shot never happens. I wait 5-10 minutes and then eventually have to interrupt the process. I have verified that the page loads, and the element that I want a screen shot of exists. I have also verified that this page works with the same code locally on my PC.
Here is the test code that I am using to verify that it works on my PC and does not work in Glitch:
const puppeteer = require("puppeteer");
async function testfunction() {
const browser = await puppeteer.launch({
headless: true,
args: ['--no-sandbox', '--disable-setuid-sandbox']
});
const page = await browser.newPage();
await page.setViewport({
width: 1920,
height: 1080,
deviceScaleFactor: 1,
});
console.log("newPage");
await page.goto("<New users can only put 2 links in a community post>"); //UPDATE WEBSITE HERE
console.log("TBA");
const matchTable = await page.$("#\\32 022new > div.col-sm-8"); //PUT SELECTOR HERE
console.log("matchTable found");
await matchTable.screenshot({ path: './schedule.png' });
console.log("done!");
await browser.close();
return true;
}
testfunction().then(console.log("Test Function"));
Any advice or insight would be appreciated.