How to run Selenium-Webdriver on Heroku with node.js (Firefox or Chrome)

Question

I want to use Selenium on Heroku with Firefox or another browser that is able to display videos. Unfortunately, PhantomJS doesn't work because the browser can't play video.

I already tried it with firefox by using these buildpacks:

And with chrome by using these buildpacks:

But I always get this in the heroku-logs:

2019-09-20T15:04:47.000000+00:00 app[api]: Build succeeded
2019-09-20T15:04:49.118915+00:00 app[web.1]: Error: Server terminated early with status 2
2019-09-20T15:04:49.118934+00:00 app[web.1]: at earlyTermination.catch.e (/app/node_modules/selenium-webdriver/remote/index.js:251:52)
2019-09-20T15:04:49.118936+00:00 app[web.1]: at process._tickCallback (internal/process/next_tick.js:68:7)

Is there a way to use selenium on heroku with a browser that can display video formats, like videos on youtube?

I haven't found a solution that works for me yet.

UPDATE

If I try this answser the same error will be displayed:

const chrome = require('selenium-webdriver/chrome');

let options = new chrome.Options();

options.addArguments('--headless');
options.addArguments('--disable-gpu');
options.addArguments('--no-sandbox');

let driver = new webdriver.Builder()
  .forBrowser('chrome')
  .setChromeOptions(options)
  .build();

driver.get('http://www.google.com').catch(err => console.log(err));

Possible duplicate of [How to use Selenium Webdriver on Heroku?](https://stackoverflow.com/questions/42860703/how-to-use-selenium-webdriver-on-heroku) — ChrisGPT was on strike, Sep 20 '19 at 17:27
The upvoted answer on this question ☝️ uses PhantomJS, but the other one uses Chrome and Chromedriver. — ChrisGPT was on strike, Sep 20 '19 at 17:28
I already tried it with this solution, but it I got almost the same issues — Jozott, Sep 20 '19 at 17:54
"Almost the same issues" isn't enough information. Please tell us exactly what you did, and exactly what errors you saw. See [ask]. — ChrisGPT was on strike, Sep 20 '19 at 18:07

Sphinx · Answer 1 · 2022-01-16T19:53:12.727

I tried this and it worked.

Note: I am using React, Express, and Selenium with chrome

Step 1: Create a new Heroku app.

Step 2: From your terminal, login to heroku using heroku login

step 3: Once you're logged in, cd to your project directory and set its remote to your heroku app. heroku git:remote -a YOUR-HEROKU-APP-NAME

step 4: Run all the following commands in your terminal

heroku buildpacks:add https://github.com/heroku/heroku-buildpack-chromedriver
heroku buildpacks:add https://github.com/heroku/heroku-buildpack-google-chrome
heroku config:set CHROME_DRIVER_PATH=/app/.chromedriver/bin/chromedriver
heroku config:set CHROME_BINARY_PATH=/app/.apt/opt/google/chrome/chrome

step 5: Login to heroku from your browser and navigate to your app. Go to settings and under buildpacks, add heroku/nodejs

step 6: This is how my index.js looks like. Note: my express entry point is inside root-dir/server/index.js and my react files are inside root-dir/client/

const express = require('express');
const app = express();
const path = require('path');

// Serve static files from the React app. 
app.use(express.static(path.join(__dirname, '..', 'client/build')));


app.get('/api', async (req, res) => {
    const webdriver = require('selenium-webdriver');
    require('chromedriver');
    const chrome = require('selenium-webdriver/chrome');

    let options = new chrome.Options();
    options.setChromeBinaryPath(process.env.CHROME_BINARY_PATH);
    let serviceBuilder = new chrome.ServiceBuilder(process.env.CHROME_DRIVER_PATH);
    
    //Don't forget to add these for heroku
    options.addArguments("--headless");
    options.addArguments("--disable-gpu");
    options.addArguments("--no-sandbox");
  

    let driver = new webdriver.Builder()
        .forBrowser('chrome')
        .setChromeOptions(options)
        .setChromeService(serviceBuilder)
        .build();

    await driver.get('http://www.google.com');
    res.send(await driver.getTitle());
});

app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname, '..', 'client/build/index.html'));
});

const port = process.env.PORT || 5000;
app.listen(port, () => {
    console.log(`listening to port ${port} now...`);
});

step 7 (if you are using React): Now inside your package.json in root-dir/, add this

"scripts": {
...
"heroku-postbuild": "cd client && npm install && npm run build"
}

step 8 (if you are using react): inside your package.json in root-dir/client/ (i.e: package.json for react app), add the following line:

  "proxy": "http://localhost:5000/",

step 8: (if you're using react): inside root-dir/client/src/, create a new file called setupProxy.js and paste the following code:

const proxy = require("http-proxy-middleware");

module.exports = function(app) {
    app.use(proxy('/api', { target: `http://localhost:${process.env.PORT || 5000}/`}));
};

step 9: Now, you are ready for deployment. Make sure you have the following packages installed: express, selenium-webdriver, and chromedriver

step 10: now push it to heroku

git add .
git commit -m "my app"
git push heroku master

score 0 · Answer 2 · answered Jan 09 '20 at 16:08

My option, maybe it could help :

const screen = {
  width: 1920,
  height: 1080
};

let options = new chrome.Options();
//Below arguments are critical for Heroku deployment
options.addArguments("--headless");
options.addArguments("--disable-gpu");
options.addArguments("--no-sandbox");
options.windowSize(screen);

I think window size is mandatory, else you are emulating an unbounded window...

How to run Selenium-Webdriver on Heroku with node.js (Firefox or Chrome)

2 Answers2

Linked