browser-testing.md

layout	lesson
title	Browser testing
desc	Spend most of the class testing your website in all the different browsers—and fixing any problems that arise.
hide_show_for_marks	true
hide_markbot	true
extra_tutorials	title url Browser testing browser-testing title url Browser testing checklist browser-testing-checklist title url Validators validators title url GitHub Issues github-issues
goal	before no_image notes Make your website work well in all the browsers—remember it [doesn’t have to look exactly the same](http://dowebsitesneedtolookexactlythesameineverybrowser.com/), but it should be functional. ### [Refer to the browser testing checklist ➔](/topics/browser-testing-checklist/) true label text Collaboration This is collaborative. You personally don’t own all the devices you need to test your website on, but as a class we have all the devices. **We’ll work together to find out who has what device and with whom you can get your website tested.**
steps	title before Enable Issues on your repo Before we start anything, everybody needs to go to **their own** repository on [GitHub.com](https://github.com) and enable their Issues tab. **[Video on enabling Issues on GitHub repos ➔](https://www.youtube.com/watch?v=vTULg-7xycs)** title before Determine the available devices Referring to the [browser testing checklist](/topics/browser-testing-checklist/), we’ll figure out what devices—and versions—need to be tested. *We’ll poll the class to see who has what versions are available and make sure as many devices and versions are covered as possible.* title before notes Write down the URL to your website Using a Gist at the front of class, we’ll write down all our URLs so that everybody has access to your website URL for testing. **The URL to this Gist will be displayed on the board so you can get a copy of the list of websites to test.** If you fork the Gist you’ll be able to check off each person as you go. label text Notice You need to know—and add—your own URL. If your name isn’t on that list you won’t get the marks. title before Test everybody’s website With everybody working together your website will be tested in all the browsers available in the classroom. **You’ll be assigned a specific device—it will be your job to test everybody’s website in the browser you’re assigned.** title before Submitting Issues If you find problems with the website you’re testing, create an Issue on GitHub *in their repository.* **[Tutorials on using GitHub Issues ➔](/topics/github-issues/)** --- ### Website URL to repo conversion  1. Cut the username. 2. Remove the starting dot. 3. Change `io` to `com`. 4. Paste the username before the repository name. --- ### Create a detailed issue The issue you create for another person’s website should be detailed with at least this information: 1. An informative title; 2. A screenshot of the problem—some devices this may be impossible to achieve, so a photo of the device screen will suffice; 3. Details and informative description of the problem; 4. Any solutions you can think of to help solve the problem. *If there already is an Issue for the problem you’re seeing, make a comment on the issue with any extra information you may know.* title before notes Fix problems If there are any problems with your website in a specific browser—fix them! **It’s up to you to make your website work well in all tested browsers—we’re developing websites for the World Wide Web (not the Wealthy Western Web).** label text Reminder Remember that your website [doesn’t have to look exactly the same in every browser](http://dowebsitesneedtolookexactlythesameineverybrowser.com/), but it should be functional and not look broken.