I am trying to call this API endpoint https://core-api.prod.blur.io/v1/collections/doodles-official/tokens?filters=%7B%22traits%22%3A%5B%5D%2C%22hasAsks%22%3Atrue%7D in a backed environment.
It work in google chrome, but when I try to make a request through node.js or postman, I get a status 403 'Forbidden'.
I added all the Chrome request headers in my options object but it still doesn't work.
const getListings = async function() {
const options = {
/* Add whatever Chrome display in the Network settings tab of the request */
};
const res = await fetch(`https://core-api.prod.blur.io/v1/collections/mutant-ape-yacht-club/tokens?filters=%7B%22traits%22%3A%5B%5D%2C%22hasAsks%22%3Atrue%7D`, options)
.then(res => {
console.log(res);
return res.json();
})
.catch(err => console.log(err));
return res;
}
I simply would like to use this URL that works in the browser in my backend application. I don't understand how this can work in my browser and not in a backed environment.
Task: I'm building a chrome extension with a popup (panel_chatwindow.js) window (standalone window). I want to take a local image file (e.g., /1.png) and upload it to a website that has a <input type='file'/> element (e.g., any services that require to upload a user photo).
Note
Other than upload file, the code can execute other web macro just fine.
My current code:
let browserWSEndpoint = "";
const puppeteer = require("puppeteer");
async function initiatePuppeteer() {
await fetch("http://localhost:9222/json/version")
.then((response) => response.json())
.then(function (data) {
browserWSEndpoint = data.webSocketDebuggerUrl;
})
.catch((error) => console.log(error));
}
initiatePuppeteer();
$("#puppeteer-button").on("action", doPuppeteerThings);
// Assign button to puppeteer function
async function doPuppeteerThings(event, actionArray) {
const browser = await puppeteer.connect({
browserWSEndpoint: browserWSEndpoint,
});
const page = await browser.newPage();
await page.setViewport({
width: 1600,
height: 1000,
});
await page.goto("website", {
waitUntil: "networkidle2",
});
await page.waitForSelector("input[type=file]");
await page.waitFor(2000);
const input = await page.$('input[type="file"]');
await input.uploadFile("/1.PNG");
})
Error message on popup window console (panel_chatwindow.js)
panel_chatwindow.js:160 is the await input.uploadFile("/1.PNG"); line
Using puppeteer.launch works perfectly fine with the code, i.e., can upload a local file to a website once launching the node server.
I don't have to use puppeteer to upload image files, any other way on chrome extension would be just fine.
I'm aware of this post: https://github.com/puppeteer/puppeteer/issues/4405 but i am not able to address my issue with any answers in the thread.
I have an application that uses Okta to log in. I am trying to set up an automation test using Cypress with Puppeteer. The problem I am having is that when I launch puppeteer with {headless: true}, it doesn't fill in the login form. {headless: false} opens another browser window outside of Cypress and works as expected. It fills in the login form, logs in correctly, but I can't run any cypress tests in that window.
on('task', {
login({username, password}) {
return (async () => {
const browser = await puppeteer.launch({headless: false});
const page = await browser.newPage();
await page.goto(config.baseUrl);
await page.waitForNavigation();
await page.waitFor('#okta-signin-username');
await page.type('#okta-signin-username', username, {delay: 100});
await page.waitFor('#okta-signin-password');
await page.type('#okta-signin-password', password, {delay: 100});
await page.click('#okta-signin-submit');
await page.waitForNavigation();
return true;
};
});
Here's how it's being used:
it('my test', () => {
cy.visit('/');
cy.viewport(1280, 1024);
cy.login('username', 'password');
//tests go here
});
The above code opens Chromium and correctly logs in but then the tests fail. It doesn't log in with {headless: true}. Am I missing something here?
Any help would be appreciated.
Thanks
I am trying to convert an html web page into a pdf file by using puppeteer. It is converting the html web page into pdf file but the problem is that, page.goto is not stopping after its job is done. When this happens, the terminal I run this localhost server from becomes a little unresponsive. I also deployed it on heroku but when I visit the url, the server responds me with error code 503 and it does not convert to pdf there.
let printPDF = async () => {
try {
const browser = await puppeteer.launch({ headless: true});
const page = await browser.newPage();
await page.goto('http://localhost:3000/preview')
await page.pdf({ format: 'A4' , path: `${__dirname}/contact.pdf`, printBackground: true});
await page.close();
await browser.close();
console.log("repeat") //logging to see its repetition
}
catch (error) {
await page.close();
await browser.close();
}
}
getReviewPage = ((req, res) => {
printPDF()
res.sendFile(`${__dirname}/form.html`)
})
app.route('/preview').get(getReviewPage);
Since printPDF is an async function returning Promise, you need to wait for it to finish, with then for example:
const getReviewPage = (req, res) => {
printPDF().then(() => res.sendFile(`${__dirname}/form.html`)
}
I am writing automated tests using Jest & Puppeteer for a Front-end application written in Vue.js
So far I managed to write a set of tests, but they all reside in the same file:
import puppeteer from 'puppeteer';
import faker from 'faker';
let page;
let browser;
const width = 860;
const height = 1080;
const homepage = 'http://localhost:8001/brt/';
const timeout = 1000 * 16;
beforeAll(async () => {
browser = await puppeteer.launch({
headless: false, // set to false if you want to see tests running live
slowMo: 30, // ms amount Puppeteer operations are slowed down by
args: [`--window-size=${width},${height}`],
});
page = await browser.newPage();
await page.setViewport({ width, height });
});
afterAll(() => {
browser.close();
});
describe('Homepage buttons', () => {
test('Gallery Button', async () => {
// navigate to the login view
await page.goto(homepage);
await page.waitFor(1000 * 0.5); // without this, the test gets stuck :(
await page.waitForSelector('[data-testid="navBarLoginBtn"]');
await page.click('[data-testid="navBarLoginBtn"]'),
await page.waitForSelector('[data-testid="navBarGalleryBtn"]');
await page.click('[data-testid="navBarGalleryBtn"]'),
// test: check if we got to the gallery view (by checking nr of tutorials)
await page.waitForSelector('.card-header');
const srcResultNumber = await page.$$eval('.card-header', (headers) => headers.length);
expect(srcResultNumber).toBeGreaterThan(1);
}, timeout);
});
describe('Register', () => {
const btnLoginToRegister = '#btn-login-to-register';
const btnRegister = '#btn-register';
const btnToLogin = '#btn-goto-login';
test('Register failed attempt: empty fields', async () => {
// navigate to the register form page via the login button
await page.goto(homepage);
await page.waitForSelector(navLoginBtn);
await page.click(navLoginBtn);
await page.waitForSelector(btnLoginToRegister);
await page.click(btnLoginToRegister);
// test; checking for error messages
await page.waitForSelector(btnRegister);
await page.click(btnRegister);
const errNumber = await page.$$eval('#errMessage', (err) => err.length);
expect(errNumber).toEqual(3);
}, timeout);
test('Register failed: invalid char count, email format', async () => {
// fill inputs
await page.waitForSelector('#userInput');
await page.type('#userInput', 'a');
await page.waitForSelector('#emailInput');
await page.type('#emailInput', 'a');
await page.waitForSelector('#emailInput');
await page.type('#passInput', 'a');
await page.waitForSelector(btnRegister);
await page.click(btnRegister);
// test: check if we 3 errors (one for each row), from the front end validations
const err = await page.$$eval('#errMessage', (errors) => errors.length);
expect(err).toEqual(3);
}, timeout);
test('Register: success', async () => {
await page.click('#userInput', { clickCount: 3 });
await page.type('#userInput', name1);
await page.click('#emailInput', { clickCount: 3 });
await page.type('#emailInput', email1);
await page.click('#passInput', { clickCount: 3 });
await page.type('#passInput', password1);
await page.waitForSelector(btnRegister);
await page.click(btnRegister);
// test: check if go to login link appeared
await page.waitForSelector(btnToLogin);
await page.click(btnToLogin);
// await Promise.all([
// page.click(btnToLogin),
// page.waitForNavigation(),
// ]);
}, timeout);
test('Register failed: email already taken', async () => {
// navigate back to the register form
await page.waitForSelector(btnLoginToRegister);
await page.click(btnLoginToRegister);
await page.click('#userInput');
await page.type('#userInput', name2);
await page.click('#emailInput');
await page.type('#emailInput', email1); // <- existing email
await page.click('#passInput');
await page.type('#passInput', password2);
await page.click(btnRegister);
const err = await page.$eval('#errMessage', (e) => e.innerHTML);
expect(err).toEqual('Email already taken');
}, timeout);
});
I would like to be able to have a single test file that does the beforeAll and afterAll stuff, and each test suite: HomepageButtons, Register, etc. to reside in it's own test file. How would I be able to achieve this?
I've tried splitting tets into:
testsUtils.js that would contain the beforeAll and afterAll hooks and code but it doesn't guarantee that it runs when it needs: the beforeAll code to fire before all other test files and the afterAll code to fire after all the test files finished.
Sorry, I'd rather comment on your question, but I don't have reputation for that. Anyway, I think that you are looking for something like a "global beforeAll" and "global afterAll" hooks, right? Jest has it alread. It's called "globalSetup" and "globalTeardown".
Take a look at globalSetup. Excerpt:
This option allows the use of a custom global setup module which
exports an async function that is triggered once before all test
suites.
The Global Teardown one goes the same.
I think you'll have a headache trying to get a reference to the page or browser in globalSetup/globalTeardown and I confess that I never try this. Maybe the answer for that problem (if you have it) is on this page, under "Custom example without jest-puppeteer preset section.
Also there is a repo that tries to facilitate Jest + Puppeteer integration. Maybe you find it util: repo.
Good luck. :)