{"id":15537,"date":"2011-12-12T09:02:51","date_gmt":"2011-12-12T16:02:51","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=15537"},"modified":"2015-02-25T20:09:15","modified_gmt":"2015-02-26T03:09:15","slug":"106-browserstack","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/video-screencasts\/106-browserstack\/","title":{"rendered":"#106: Use BrowserStack for Live Web-Based Cross Browser Testing"},"content":{"rendered":"

There are many tools for showing you screenshots of websites in different browsers to help with testing. But a screenshot is lacking in so many ways: no clicking, no hovering, no typing, no resizing, no testing JavaScript or other interactive elements, nothing. Real cross-browser testing means opening those websites in real live browsers. Some people use virtual machines to do that testing, but that can be resource intensive in more ways than one. <\/p>\n

BrowserStack<\/a> is the holy grail of cross-browser testing. Real virtual machines that you can run and test with right in your browser, including localhost!<\/p>\n","protected":false},"excerpt":{"rendered":"

There are many tools for showing you screenshots of websites in different browsers to help with testing. But a screenshot is lacking in so many ways: no clicking, no hovering, no typing, no resizing, no testing JavaScript or other interactive elements, nothing. Real cross-browser testing means opening those websites in real live browsers. Some people […]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":1283,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"video-single.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":20801,"url":"https:\/\/css-tricks.com\/lodge\/artists-website\/039-cross-device-testing\/","url_meta":{"origin":15537,"position":0},"title":"#039 – Cross Device Testing","date":"March 26, 2013","format":false,"excerpt":"For the most part so far, we've used the iOS simulator to test the mobile version of our site. That's pretty good, a lot better than testing a narrow browser window, but it is also not nearly comprehensive. We use BrowserStack to test the site on some other devices, through\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1283,"url":"https:\/\/css-tricks.com\/video-screencasts\/","url_meta":{"origin":15537,"position":1},"title":"Video Screencasts","date":"November 3, 2008","format":false,"excerpt":"#115: Don't Overthink It Grids Running time: 17:19 Almost every site on the internet needs some kind of grid. Grids don't have to be a big complicated framework. You can create one yourself with just a few lines of CSS. #114: Let\u2019s Do Simple Stuff to Make Our Websites Faster\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":197696,"url":"https:\/\/css-tricks.com\/almanac\/properties\/i\/image-rendering\/","url_meta":{"origin":15537,"position":2},"title":"image-rendering","date":"March 18, 2015","format":false,"excerpt":"The image-rendering property defines how the browser should render an image if it is scaled up or down from its original dimensions. By default, each browser will attempt to apply aliasing to this scaled image in order to prevent distortion, but this can sometimes be a problem if we want\u2026","rel":"","context":"With 11 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":335369,"url":"https:\/\/css-tricks.com\/video-screencasts\/204-using-the-axe-devtools-web-accessibility-testing-browser-plugin\/","url_meta":{"origin":15537,"position":3},"title":"#204: Using the axe DevTools Web Accessibility Testing Browser Plugin","date":"March 4, 2021","format":false,"excerpt":"In this video, I'm joined by Preety Kumar of Deque to take a look at their DevTools plugin for axe. Short story: this is an amazing plugin that helps you quickly find accessibility problems on any website, then helps you fix them. There is quick automated testing as well as\u2026","rel":"","context":"In \"accessibility\"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/thumb-axe.png?fit=1200%2C675&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":150309,"url":"https:\/\/css-tricks.com\/lodge\/learn-jquery\/11-animating-jquery\/","url_meta":{"origin":15537,"position":4},"title":"#11: Animating with jQuery","date":"September 17, 2013","format":false,"excerpt":"If you first dabbled with jQuery many years ago, it might have been it's ability to do animation. That was perhaps one of jQuery's first big draws. These days, CSS can do animation as well with fairly decent browser support and it tends to be more performant, so it's less\u2026","rel":"","context":"With 7 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":298175,"url":"https:\/\/css-tricks.com\/video-screencasts\/178-percy-catches-visual-changes-in-any-workflow\/","url_meta":{"origin":15537,"position":5},"title":"#178: Percy Catches Visual Changes in any Workflow","date":"November 6, 2019","format":false,"excerpt":"I wanted to make sure you understand exactly what Percy can do for you, hence the title. When you commit a change to your websites Git repo, like in a Pull Request workflow most of us live in, Percy will let you know if that change causes any visual changes\u2026","rel":"","context":"In \"percy\"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/11\/percy-thumb.png?fit=1200%2C620&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/15537"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=15537"}],"version-history":[{"count":2,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/15537\/revisions"}],"predecessor-version":[{"id":15545,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/15537\/revisions\/15545"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/1283"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=15537"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=15537"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}