schickling / chromeless Goto Github PK
View Code? Open in Web Editor NEWπ₯ Chrome automation made simple. Runs locally or headless on AWS Lambda.
Home Page: https://chromeless.netlify.com
License: MIT License
π₯ Chrome automation made simple. Runs locally or headless on AWS Lambda.
Home Page: https://chromeless.netlify.com
License: MIT License
Use chrome-launcher to launch Chrome when using Chromeless locally. Then we don't have to explain to users that they need to have Chrome running for Chromeless to work locally.
It is unclear what terms this tool is distributed under. Without a license it defaults to being proprietary (All Rights Reserved). Can you please clarify by adding a LICENSE file?
when done
Probably want to fail quickly if goto
gets a bad URL (also might want it to return a value for the resolved URL in case of redirects)
Not seeing a wait
-like API for pageload. Might be nice to have chromeless "pause" execution if a pageload happens or retry failed actions when a pageload occurs
These are critical for my tests, and could very well be for others. It may not seem so important, but it is when actual pages don't matter. I test some of my libraries with a single instance on about:blank
with inject()
; refresh()
'ing before each test.
https://github.com/stevenvachon/universal-url/blob/master/test.js#L179-L184
Things like check
, uncheck
, select
and more for form elements
ServerlessError: The request signature we calculated does not match the signature you provided. Check your AWS Secret Access Key and signing method. Consult the service documentation for details.
Ensures that's elements are visible (which is a hard thing to implement in a .evaluate as there's a whole host of things that can make something invisible).
Currently we're uploading to our own Graphcool project - maybe we just want to return the b64 string so people can save it with fs.writeFile
on their own
I'm wondering why viewport size is set to 1440x900 by default when in headless mode. Is it not possible to do this in headless mode too?
Ideally the entire AWS IoT setup would be contained in the serverless.yml
file of the remote serverless stack.
Is there any way to save image or link on an element?
Or maybe I can use evaluate() to download them π€
As the Input.dispatchMouseEvent
didn't work for all cases, we added the artificial element.click()
.
This should have a cleaner solution
Currently it's not a nice experience when you want to evaluate code, but continue with the method chain. This is an example of tests that I implemented with chromeless. Here it gets pretty clear, that we should have a variant of eval.code
that returns the Chromeless
instance. One possibility would be to call it directly .code()
export default async (cookies: any[]): Promise<any> => {
const chromeless = new Chromeless({
runRemote,
waitTimeout,
viewport,
})
await chromeless
.cookies.set(cookies)
.goto(CONSOLE_URL)
.wait(3200)
.wait('a[data-test="sidenav-databrowser"]')
.click('a[data-test="sidenav-databrowser"]')
.wait(2200)
.wait('a[data-test="sidenav-databrowser-model-Post"]')
.click('a[data-test="sidenav-databrowser-model-Post"]')
.wait(2200)
.click('div[class^="NewRowInactive__add"]')
.type('test url')
.eval.code(() => document.querySelector('div[data-test="new-row-cell-imageUrl"] input').blur())
await chromeless
.click('div[data-test="new-row-cell-description"] > div > div')
.wait(400)
.wait('div[data-test="new-row-cell-description"] input')
.type('some description', 'div[data-test="new-row-cell-description"] input')
.eval.code(() => document.querySelector('div[data-test="new-row-cell-description"] input').blur())
await chromeless
.wait(700)
.click('button[data-test="add-node"]')
.wait(300)
.click('div[data-test="edit-field-imageUrl"]')
.click('div[data-test="cell-imageUrl"]')
.type('123')
.eval.code(() => document.querySelector('input').focus())
return chromeless
.press(13)
.wait(400)
.click('div[data-test="checkbox-row-0"]')
.wait(400)
.click('div[data-test="delete-button"]')
.wait(400)
.click('div.button.warning')
.end()
}
If you're interested in more test examples, here are our console tests: https://github.com/graphcool/console/tree/dev/integration-tests/src/tests
Since running integration tests in parallel is one of the great benefits of the project it'd be good to have a small example showing how it can be done. The examples available right now enlighten the uses in automation and scraping, but not so much on tests.
If you're writing a test that does a lot of interactive JS, there's going to be a lot of wait
-type calls inside of scripts. It might be nice to automatically wait for elements as opposed to having to tell chromeless every time to wait for something.
It would be great to quickly spin up a farm of chromeless images to run a test suite in parallel.
Using containers would remove the AWS requirement for scalability.
I'm not a docker expert, just started to evaluate docker-based solution as our test suite has grown significantly in the last couple of months, and we need a more elastic approach.
The usage
section of the readme shows how to create a file with some code in, how to start chrome headlessly, but not how to actually run the example. Please update the README.
Is this demo open source? I'd like to look at the code of the page, especially the editor section.
When clicking on an element that is not in the screen, chromeless should scroll to that position
Evaluate is a good hook for consumers to do what they wish for DOM stuff, but it's probably a good idea to have some sugar methods like attr
, text
, and html
so that folks can write scrapers more easily.
Currently viewport parameters has to be set as options like this:
but the documentation states that you should be calling the viewport method:
https://github.com/graphcool/chromeless/blob/master/docs/api.md#viewportwidth-number-height-number
If you do that, the function will time out.
Chrome exposes a mechanism in which to get coverage for scripts. This type of information is crucial to front-end devs as it exposes unused code-paths. Would love to see an API for this
https://chromedevtools.github.io/devtools-protocol/tot/Network/#method-setExtraHTTPHeaders
Consumers should probably be allowed to set headers for requests (helps with functional tests so that you can auth once and use headers on subsequent requests).
For example introduce debug
I'm trying to evaluate some code before taking a screenshot, but when I do that the screenshot returns a completely white image.
You can reproduce this by going to https://chromeless.netlify.com and replacing line 5 with:
.evaluate(() => { console.log('Hello') })
Repo: https://github.com/graphcool/chromeless-playground
Hi guys,
Just FYI: the demo playground may not work on some Win7 machines because the Root Cisco Cert you're using to sign your certificate with is not known.
I tried opening the same website on a Virtual Ubuntu on the same machine Β- all works perfectly. Not sure that you want to support all dinosaur-age operating systems, but still letting you know :Β-)
how can i get console.log from .evaluate() ?
i try to write this code, and i got 'undefined'
what's wrong with my code.
const { Chromeless } = require('chromeless');
async function run() {
const chromeless = new Chromeless()
const login = await chromeless
.cookiesClearAll()
.goto('http://localhost/project/')
.type('admin, 'input[id="username"]')
.type('admin', 'input[id="password"]')
.click('#submit')
.wait('#last-loaded')
.click('#last-loaded')
.wait('#menu-sidebar')
.evaluate(() => {
const Links = [].map.call(
document.querySelector('.main-nav').querySelectorAll('a'),
a => a.href
)
return JSON.stringify(Links)
})
console.log(login)
await chromeless.end()
}
run()
.catch(console.error.bind(console))
const evalRes = await chromeless
.goto('https://www.graph.cool')
.evaluate(() => {
return new Promise((resolve) => {
setTimeout(() => {
resolve('ok');
}, 10);
});
})
console.log(evalRes)
await chromeless.end()
It's possible to return even async stuff as well: https://chromedevtools.github.io/devtools-protocol/tot/Runtime/#method-evaluate. There's a param called awaitPromise
to indicate it's async. You can also "assume" it's async by default even if it's not and just return the value immediately.
Error: connect ECONNREFUSED 127.0.0.1:9222
?
I have been playing around with chromeless and I noticed, that there is a timeout for the wait()
function (https://github.com/graphcool/chromeless/blob/master/src/api.ts#L21).
Would be great to be able to customize that. Not sure if it's better via an options
object directly passed to the wait()
function or via a global config
object passed to the new Chromeless()
.
I can also make a PR for the chosen option.
?
Would be nice to have a size
method for changing the browser window size (helpful for screenshots and stuff where users want to capture responsive sites)
Similar to https://github.com/segmentio/daydream
Does this support authenticated proxies? Similar to how nightmarejs has the .authentication
method
The screenshot() method returns the full-page screenshot, is there any way to get the screenshot of a DIV or any other element?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.