Use these pages to test PhantomJsCloud features. Each page has a try it request: POST its JSON to
https://phantomjscloud.com/api/browser/v2/a-demo-key-with-low-quota-per-ip-address/, or click run to open it in your browser.
Renders with the demo key may use scripts, request headers, cookies, login details, inline content and the other limited request
fields only on these example pages, at https://examples.phantomjscloud.com/examples/ or
https://phantomjscloud.com/examples/, and every request of such a render must stay on these pages. Pages marked as loading
other sites refuse demo-key renders that use a limited field; a plain render of them works. To use the limited fields on other sites,
create a free account at dashboard.phantomjscloud.com and use its API key; free
accounts (accounts holding less than 0.05 credits) may also be limited the same way, while accounts holding 0.05 credits or more never
are.
| Page | What it shows and a try-it request |
|---|
| basic.html | title, heading, a #target box, text, an image and a script (#img-loaded and #script-ran appear when they load){"url":"https://examples.phantomjscloud.com/examples/corpus/basic.html","renderType":"png","renderSettings":{"selector":"#target"}} |
| simple.html | a minimal static page with links to the helpers{"url":"https://examples.phantomjscloud.com/examples/corpus/simple.html","renderType":"pdf"} |
| example.com.html | a copy of example.com for scripts, overseerScript and queryJson{"url":"https://examples.phantomjscloud.com/examples/corpus/example.com.html","renderType":"automation","overseerScript":"await page.waitForNavigation(); page.render.content(); await page.render.screenshot();"} |
| redirect.html | redirects to simple.html with JavaScript{"url":"https://examples.phantomjscloud.com/examples/corpus/redirect.html","renderType":"plainText"} |
| flower.png | an image (renderSettings.selector "img"){"url":"https://examples.phantomjscloud.com/examples/corpus/flower.png","renderType":"png","renderSettings":{"selector":"img"}} |
| Page | What it shows and a try-it request |
|---|
| slow-load.html | its load event fires about ?ms= milliseconds late (resourceWait, maxWait, waitForNavigation){"url":"https://examples.phantomjscloud.com/examples/corpus/slow-load.html?ms=3000","renderType":"plainText","requestSettings":{"maxWait":20000}} |
| late-element.html | a .late element appears ?ms= after load (waitForSelector, manualWait/done){"url":"https://examples.phantomjscloud.com/examples/corpus/late-element.html?ms=2000","renderType":"png","overseerScript":"page.manualWait(); await page.waitForSelector('.late'); page.done();"} |
| ajax.html | loads data while rendering (doneWhen, passThroughStatusCode); it also loads files from other sites{"url":"https://examples.phantomjscloud.com/examples/corpus/ajax.html","requestSettings":{"doneWhen":[{"text":"\"statusCode\":206","statusCode":202},{"selector":"pre#fill-target","statusCode":201}],"waitInterval":0},"renderSettings":{"passThroughStatusCode":true}} |
| ajax-fast.html | loads data quickly while rendering; it also loads files from other sites{"url":"https://examples.phantomjscloud.com/examples/corpus/ajax-fast.html","renderType":"plainText"} |
| timezone.html | a live clock #clock in the browser's time zone (page.emulateTimezone){"url":"https://examples.phantomjscloud.com/examples/corpus/timezone.html","renderType":"png","renderSettings":{"selector":"#clock"},"overseerScript":"await page.emulateTimezone('Asia/Tokyo');"} |
| Page | What it shows and a try-it request |
|---|
| button-click.html | a button that fills #demo_result one second after a click{"url":"https://examples.phantomjscloud.com/examples/corpus/button-click.html","renderType":"jpeg","overseerScript":"page.manualWait(); await page.waitForSelector('button#dateBtn'); page.click('button#dateBtn'); await page.waitForFunction(()=>document.querySelector('#demo_result').textContent!==''); page.done();"} |
| button-click-navigate.html | a button that opens navigation-complete.html{"url":"https://examples.phantomjscloud.com/examples/corpus/button-click-navigate.html","renderType":"jpeg","overseerScript":"await page.waitForSelector('button#navBtn'); page.click('button#navBtn'); await page.waitForNavigation();"} |
| navigation-complete.html | shows the page you came from (document.referrer){"url":"https://examples.phantomjscloud.com/examples/corpus/navigation-complete.html","renderType":"plainText"} |
| automation.html | buttons, labels and a login box (user / pass) for overseerScript{"url":"https://examples.phantomjscloud.com/examples/corpus/automation.html","renderType":"jpeg","overseerScript":"await page.waitForSelector('input[name=id]'); await page.type('input[name=id]','user'); await page.type('input[name=pass]','pass'); await Promise.all([page.waitForNavigation(), page.click('input[value=Login]')]);"} |
| form.html · welcome.html | a sign-in form (any name and password) that opens welcome.html; press Enter or click #submit{"url":"https://examples.phantomjscloud.com/examples/corpus/form.html","renderType":"jpeg","overseerScript":"await page.waitForSelector('#user'); await page.type('#user','demo'); await page.type('#pass','secret'); await Promise.all([page.waitForNavigation(), page.click('#submit')]); await page.waitForSelector('#welcome');"} |
| links.html | links to other example pages (click, waitForNavigation, goBack, goForward){"url":"https://examples.phantomjscloud.com/examples/corpus/links.html","renderType":"plainText","overseerScript":"await Promise.all([page.waitForNavigation(), page.click('#to-basic')]); await page.goBack();"} |
| post-link.html | forms that post to /examples/helpers/requestdata (same site){"url":"https://examples.phantomjscloud.com/examples/corpus/post-link.html","renderType":"html"} |
| search-results.html | a search page: consent overlay, search box, results and a next-page link{"url":"https://examples.phantomjscloud.com/examples/corpus/search-results.html","renderType":"jpeg","overseerScript":"await page.waitForSelector('#consent-accept'); await page.click('#consent-accept'); await page.type('#q','cloud browser'); await Promise.all([page.waitForNavigation(), page.keyboard.press('Enter')]); await page.waitForSelector('.result');"} |
| Page | What it shows and a try-it request |
|---|
| listing.html · listing-item.html | a catalog listing (?kind=equipment, property or product) whose items load after the page; each item links to its detail page{"url":"https://examples.phantomjscloud.com/examples/corpus/listing.html?kind=equipment","renderType":"automation","overseerScript":"await page.waitForSelector('#results .item'); await page.meta.store.set('items', await page.evaluate(() => [...document.querySelectorAll('#results .item h3')].map(e => e.textContent)));"} |
| rates-table.html | a table of rates and exchange prices loaded after the page (plainText, selector, queryJson){"url":"https://examples.phantomjscloud.com/examples/corpus/rates-table.html","renderType":"png","renderSettings":{"selector":"#rates"}} |
| chart.html | a bar chart drawn and animated by script, with a tooltip on hover (viewport, zoomFactor, clipRectangle){"url":"https://examples.phantomjscloud.com/examples/corpus/chart.html","renderType":"jpeg","renderSettings":{"viewport":{"width":1280,"height":800},"zoomFactor":0.8,"quality":70,"clipRectangle":{"top":0,"left":0,"width":640,"height":500}}} |
| third-party-standins.html | a page full of add-ons (tag manager, beacon, pixel, consent banner, library, web font), each a stand-in on this site; paying accounts can block them with requestSettings.resourceModifier regex ".*/standins/.*"{"url":"https://examples.phantomjscloud.com/examples/corpus/third-party-standins.html","renderType":"html","outputAsJson":true,"requestSettings":{"ignoreImages":true,"resourceTimeout":3000}} |
| news.ycombinator.com.html | a copy of a long news list (scrolling, plainText); its links point to other sites{"url":"https://examples.phantomjscloud.com/examples/corpus/news.ycombinator.com.html","renderType":"plainText"} |
Small made-up websites of the kinds people automate. All names and data are fictional; each site keeps its data in the browser and loads nothing from other sites.
| Site | What it shows and a try-it request |
|---|
| demo/crm/ | a CRM: sign-in page (demo account shown on the page), a contact list with search, stage filter, sorting, paging, pipeline summary and a new-contact dialog, and contact pages with activity notes, inline edit and delete{"url":"https://examples.phantomjscloud.com/examples/corpus/demo/crm/index.html","renderType":"jpeg","overseerScript":"await page.waitForSelector('#email'); await page.type('#email','demo@example.com'); await page.type('#password','demo1234'); await Promise.all([page.waitForNavigation(), page.click('#signin-submit')]); await page.waitForSelector('#search'); await page.type('#search','Acme'); await page.waitForSelector('#contacts tbody tr a'); await Promise.all([page.waitForNavigation(), page.click('#contacts tbody tr a')]); await page.waitForSelector('#contact-detail');"} |
| demo/todo/ | a todo list: add on Enter, toggle, double-click to edit, delete, All/Active/Completed filters and items left; items stay in the browser's storage{"url":"https://examples.phantomjscloud.com/examples/corpus/demo/todo/index.html","renderType":"jpeg","renderSettings":{"selector":"#todoapp"},"overseerScript":"await page.waitForSelector('#new-todo'); await page.type('#new-todo','Buy milk'); await page.keyboard.press('Enter'); await page.type('#new-todo','Render a page'); await page.keyboard.press('Enter'); await page.click('#todo-list li:last-child .toggle');"} |
| demo/news/ | a news feed: category tabs, article cards, a cookie consent bar, a load-more button, infinite scroll that reacts to any scrolling (window.scrollTo included) and a subscribe overlay after the first mouse-wheel, touch or keyboard scroll; article pages load comments on demand{"url":"https://examples.phantomjscloud.com/examples/corpus/demo/news/index.html","renderType":"plainText","overseerScript":"await page.waitForSelector('#consent-accept'); await page.click('#consent-accept'); await page.evaluate(()=>document.querySelector('#load-more').click()); await page.waitForFunction(()=>document.querySelectorAll('#feed .card').length>=20);"} |
| demo/shop/ | a shop: product grid, product pages, a cart with quantities and totals, a three-step checkout (invoice only, no card fields) and an order confirmation{"url":"https://examples.phantomjscloud.com/examples/corpus/demo/shop/index.html","renderType":"jpeg","overseerScript":"await page.waitForSelector('.product a'); await Promise.all([page.waitForNavigation(), page.click('.product a')]); await page.waitForSelector('#add-to-cart'); await page.click('#add-to-cart'); await Promise.all([page.waitForNavigation(), page.click('#view-cart')]); await Promise.all([page.waitForNavigation(), page.click('#checkout')]); await page.waitForSelector('#name'); await page.type('#name','Pat Example'); await page.type('#email','pat@example.com'); await page.type('#address','123 Example Street'); await page.type('#city','Springfield'); await page.type('#zip','12345'); await page.click('#to-step-2'); await page.waitForSelector('#step-2:not([hidden])'); await page.click('#to-step-3'); await page.waitForSelector('#step-3:not([hidden])'); await Promise.all([page.waitForNavigation(), page.click('#place-order')]); await page.waitForSelector('#order-number');"} |
| demo/booking/ | a booking calendar: January to March 2026, free and booked time slots, a booking form with checks and a confirmation page{"url":"https://examples.phantomjscloud.com/examples/corpus/demo/booking/index.html","renderType":"jpeg","overseerScript":"await page.waitForSelector('.slot'); await page.click('.slot'); await page.waitForSelector('#booking-form:not([hidden])'); await page.type('#name','Pat Example'); await page.type('#email','pat@example.com'); await Promise.all([page.waitForNavigation(), page.click('#confirm-booking')]); await page.waitForSelector('#booking-confirmation');"} |
| Page | What it shows and a try-it request |
|---|
| frames-shadow.html | an iframe of basic.html and an open shadow root holding #shadow-text{"url":"https://examples.phantomjscloud.com/examples/corpus/frames-shadow.html","renderType":"plainText","renderSettings":{"shadowDom":"output","iFrameMaxDepth":3}} |
| iframe.html · iframe-child.html | three frames (renderIFrame, iFrameMaxCount){"url":"https://examples.phantomjscloud.com/examples/corpus/iframe.html","renderType":"jpeg","outputAsJson":true} |
| workers.html | a background worker and two worklets; #worker shows the worker's reply{"url":"https://examples.phantomjscloud.com/examples/corpus/workers.html","renderType":"plainText"} |
| tall.html | a block ?h= pixels tall (h=70000 passes the JPEG height limit; PNG keeps the whole page){"url":"https://examples.phantomjscloud.com/examples/corpus/tall.html?h=70000","renderType":"jpeg"} |
| Page | What it shows and a try-it request |
|---|
| print.html | a long text page that fills several PDF pages{"url":"https://examples.phantomjscloud.com/examples/corpus/print.html","renderType":"pdf","renderSettings":{"pdfOptions":{"format":"A4","landscape":false}}} |
| invoice.html | an invoice with backgrounds and a repeated table header (pdfOptions printBackground, preferCSSPageSize){"url":"https://examples.phantomjscloud.com/examples/corpus/invoice.html","renderType":"pdf","renderSettings":{"emulateMedia":"print","pdfOptions":{"format":"letter","printBackground":true}}} |
| css-media-query-print.html | looks different on screen and in print (emulateMedia){"url":"https://examples.phantomjscloud.com/examples/corpus/css-media-query-print.html","renderType":"pdf","renderSettings":{"emulateMedia":"print"}} |
| header-template.html | for PDF header and footer templates{"url":"https://examples.phantomjscloud.com/examples/corpus/header-template.html","renderType":"pdf","renderSettings":{"pdfOptions":{"format":"letter","headerTemplate":"<span style='font-size:10px'>Page <span class='pageNumber'></span> of <span class='totalPages'></span></span>","margin":{"top":"1in","bottom":"1in"}}}} |
| Page | What it shows and a try-it request |
|---|
| /examples/helpers/requestdata | shows the request it received: method, body, headers, cookies, user agent (urlSettings, customHeaders, userAgent){"url":"https://examples.phantomjscloud.com/examples/helpers/requestdata","renderType":"plainText","urlSettings":{"operation":"POST","data":"{\"hello\":\"world\"}","contentType":"application/json"},"requestSettings":{"customHeaders":{"X-Example":"1"},"userAgent":"ExampleBot/1.0"}} |
| /examples/helpers/two-cookies | sets two cookies (c1, c2){"url":"https://examples.phantomjscloud.com/examples/helpers/two-cookies","renderType":"plainText","outputAsJson":true} |
| requestSettings.cookies | send your own cookies: set each cookie's domain to examples.phantomjscloud.com{"url":"https://examples.phantomjscloud.com/examples/helpers/requestdata","renderType":"plainText","requestSettings":{"cookies":[{"domain":"examples.phantomjscloud.com","name":"myCookie","value":"value1"}]}} |
| /examples/helpers/auth | HTTP Basic sign-in; any user name and password work (requestSettings.authentication){"url":"https://examples.phantomjscloud.com/examples/helpers/auth","renderType":"plainText","requestSettings":{"authentication":{"userName":"guest","password":"guest"}}} |
| /examples/helpers/statusCode/{code} | answers the status code you name (passThroughStatusCode){"url":"https://examples.phantomjscloud.com/examples/helpers/statusCode/404","renderType":"plainText","renderSettings":{"passThroughStatusCode":true}} |
| /examples/helpers/ip | shows the address the request came from (proxy checks){"url":"https://examples.phantomjscloud.com/examples/helpers/ip","renderType":"plainText"} |
| /examples/helpers/pageRequestDefaults | the default value of every request field{"url":"https://examples.phantomjscloud.com/examples/helpers/pageRequestDefaults","renderType":"plainText"} |
| /examples/scripts/ | scripts to load into a page (page.addScriptTag, scripts){"url":"https://examples.phantomjscloud.com/examples/corpus/example.com.html","renderType":"jpeg","overseerScript":"await page.waitForNavigation(); await page.addScriptTag({url:'https://examples.phantomjscloud.com/examples/scripts/hilitor.js'}); await page.evaluate(()=>{new Hilitor().apply('Example');});"} |
