search

garris / BackstopJS

Catch CSS curve balls.
http://backstopjs.org
MIT License
6.82k stars 607 forks source link

Logging page errors #382

Open jeanbza opened 7 years ago

jeanbza commented 7 years ago

Hello! I am having some weird javascript errors on the page when using backstop.js. I've the following in my onBefore.js to log errors, but I'm not seeing anything - am I missing something?

module.exports = function(casper, scenario, vp) {
  //This script runs before your app loads. Edit here to log-in, load cookies or set other states required for your test.

  console.log('onBefore.js starting')

  casper.wait(1000, function() {

  });

  casper.on("remote.message", function(msg) {
    console.log("Console: " + msg);
  });

  casper.on("page.error", function(msg, trace) {
    console.log("Error: " + msg);
  });

  casper.on("resource.error", function(msg, trace) {
    console.log("Res.Error: " + msg);
  });

  console.log('onBefore.js has run for ' + vp.name + '.');
};
jeanbza commented 7 years ago

Edit: And, I have debug: true in my backstop.json

stevecfischer commented 7 years ago

what are the last 5 - 10 lines in the console?

jeanbza commented 7 years ago

@stevecfischer

Console when I open the page in my browser:

screen shot 2017-01-24 at 1 03 33 pm

Terminal when I run backstop reference in which I expect to see the above errors:

±  |styleguide_new U:2 ?:2 ✗| → ./node_modules/.bin/backstop reference
BackstopJS loading config:  /Users/pivotal/workspace/pivotal-ui/styleguide_new/backstop.json

COMMAND | Executing core for `reference`
  clean | backstop_data/bitmaps_reference was cleaned.

Running CasperJS with:  [ '/Users/pivotal/workspace/pivotal-ui/styleguide_new/node_modules/backstopjs/capture/genBitmaps.js' ]
CasperJS:  Debug is enabled!
CasperJS: CREATING NEW REFERENCE FILES
CasperJS:  [info] [phantom] Starting...
CasperJS:  onBefore.js starting
CasperJS:  onBefore.js has run for computer.
CasperJS:  [info] [phantom] Running suite: 7 steps
CasperJS:  [debug] [phantom] Successfully injected Casper client-side utilities
CasperJS:  [info] [phantom] Step anonymous 1/7: done in 35ms.
CasperJS:  [info] [phantom] Step _step 2/8: done in 52ms.
CasperJS:  [info] [phantom] Step _step 3/8: done in 160ms.
CasperJS:  [info] [phantom] wait() finished waiting for 1000ms.
CasperJS:  [debug] [phantom] opening url: http://localhost:8000/buttons, HTTP GET
CasperJS:  [debug] [phantom] Navigation requested: url=http://localhost:8000/buttons, type=Other, willNavigate=true, isMainFrame=true
CasperJS:  [debug] [phantom] url changed to "http://localhost:8000/buttons"
CasperJS:  [debug] [phantom] Successfully injected Casper client-side utilities
CasperJS:  [info] [phantom] Step anonymous 5/8 http://localhost:8000/buttons (HTTP 200)
CasperJS:  [info] [phantom] Step anonymous 5/8: done in 1567ms.
CasperJS:  [info] [phantom] Step _step 6/10 http://localhost:8000/buttons (HTTP 200)
CasperJS:  [info] [phantom] Step _step 6/10: done in 1589ms.
CasperJS:  [info] [phantom] waitFor() finished in 42ms.
CasperJS:  [info] [phantom] Step anonymous 7/11 http://localhost:8000/buttons (HTTP 200)
CasperJS:  Ready event received.
CasperJS: [info] [phantom] Step anonymous 7/11: done in 1651ms.
CasperJS:  [info] [phantom] Step _step 8/11 http://localhost:8000/buttons (HTTP 200)
CasperJS:  [info] [phantom] Step _step 8/11: done in 1673ms.
CasperJS:  [info] [phantom] wait() finished waiting for 500ms.
CasperJS:  [info] [phantom] Step anonymous 9/11 http://localhost:8000/buttons (HTTP 200)
CasperJS:  Current location is http://localhost:8000/buttons
CasperJS:  <body>
CasperJS: <div id="root"><div data-reactroot="" id="app"><div class="sidebar"><input class="sidebar--search" placeholder="search by component name"><div class="sidebar--content"><h2>Styles</h2><a href="icons" class="sidebar--item">Icons</a><a href="colors" class="sidebar--item">Colors</a><a href="grid" class="sidebar--item">Grid</a><h2>Components</h2><a href="alerts" class="sidebar--item">Alerts</a><a href="alignment" class="sidebar--item">Alignment</a><a href="autocomplete" class="sidebar--item">Autocomplete</a><a href="buttons" class="sidebar--item">Buttons</a><a href="collapse" class="sidebar--item">Collapse</a><a href="copy_to_clipboard" class="sidebar--item">Copy To Clipboard</a><a href="dividers" class="sidebar--item">Dividers</a><a href="dropdowns" class="sidebar--item">Dropdowns</a><a href="ellipsis" class="sidebar--item">Ellipsis</a><a href="expander" class="sidebar--item">Expander</a><a href="forms" class="sidebar--item">Forms</a><a href="grids" class="sidebar--item">Grids</a><a href="hoverable" class="sidebar--item">Hoverable</a><a href="images" class="sidebar--item">Images</a><a href="labels" class="sidebar--item">Labels</a><a href="lists" class="sidebar--item">Lists</a><a href="media" class="sidebar--item">Media</a><a href="modals" class="sidebar--item">Modals</a><a href="notifications" class="sidebar--item">Notifications</a><a href="pagination" class="sidebar--item">Pagination</a><a href="panels" class="sidebar--item">Panels</a><a href="panes" class="sidebar--item">Panes</a><a href="portals" class="sidebar--item">Portals</a><a href="ribbons" class="sidebar--item">Ribbons</a><a href="select" class="sidebar--item">Select</a><a href="svg" class="sidebar--item">Svg</a><a href="tables" class="sidebar--item">Tables</a><a href="tabs" class="sidebar--item">Tabs</a><a href="tooltips" class="sidebar--item">Tooltips</a></div></div><div class="content"><div class="markdown-viewer"><h1 id="buttons">Buttons</h1>
CasperJS: <ul>
CasperJS: <li>a</li>
CasperJS: <li>b</li>
CasperJS: <li>c</li>
CasperJS: </ul>
CasperJS: <pre><code class="lang-jsx">console.error('&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;');
CasperJS: console.error('&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;');
CasperJS: console.error('hello world!!!');
CasperJS: console.error('&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;');
CasperJS: console.error('&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;');
CasperJS:
CasperJS: &lt;DefaultButton&gt;
CasperJS:   yo
CasperJS: &lt;/DefaultButton&gt;
CasperJS: </code></pre>
CasperJS: <ol>
CasperJS: <li>c</li>
CasperJS: <li>d</li>
CasperJS: <li>e</li>
CasperJS: </ol>
CasperJS: <pre><code class="lang-jsx">&lt;PrimaryButton&gt;
CasperJS:   hello world
CasperJS: &lt;/PrimaryButton&gt;
CasperJS: </code></pre>
CasperJS: </div></div></div></div>
CasperJS: <script src="./dist/bundle.js"></script>
CasperJS:
CasperJS: </body>
CasperJS:  [info] [phantom] Step anonymous 9/11: done in 2195ms.
CasperJS:  [info] [phantom] Step anonymous 10/11 http://localhost:8000/buttons (HTTP 200)
CasperJS:  onReady.js has run for:  computer
CasperJS:  [info] [phantom] Step anonymous 10/11: done in 2216ms.
CasperJS:  [info] [phantom] Step anonymous 11/11 http://localhost:8000/buttons (HTTP 200)
CasperJS:  Capturing screenshots for computer (1920x1200)
CasperJS:  [debug] [phantom] Capturing page to /Users/pivotal/workspace/pivotal-ui/styleguide_new/backstop_data/bitmaps_reference/css_test_Buttons_0_html_0_computer.png with clipRect {"height":1200,"left":0,"top":0,"width":1920}
CasperJS:  [info] [phantom] Capture saved to /Users/pivotal/workspace/pivotal-ui/styleguide_new/backstop_data/bitmaps_reference/css_test_Buttons_0_html_0_computer.png
CasperJS:  [info] [phantom] Step anonymous 11/11: done in 2426ms.
CasperJS:  [info] [phantom] Done 11 steps in 2426ms
CasperJS:  Comparison config file updated.
CasperJS:  [debug] [phantom] Navigation requested: url=about:blank, type=Other, willNavigate=true, isMainFrame=true
CasperJS:  [debug] [phantom] url changed to "about:blank"

Bitmap file generation completed.

Run `$ backstop test` to generate diff report.

COMMAND | Command `reference` sucessfully executed
jeanbza commented 7 years ago

Sidenote: this is a react.js app that is transpiled to ES5 with babel before load. Half the page (the 'sidebar', which is a react element) loads but the other half does not (the 'content' react element).

Not sure if any of that information is helpful, thought I'd mention though.

jeanbza commented 7 years ago

Also, this is an open source project for which I can create a branch if you'd like to see it live on your own computer.

stevecfischer commented 7 years ago

Thanks for that, now can you explain these "weird js errors"

stevecfischer commented 7 years ago

@jadekler - sorry I just caught the first part of your reply. So that is a screenshot of the console when running your app? Maybe I'm missing something but what do those errors have to do with backstop?