Browser testing

Spend most of the class testing your website in all the different browsers—and fixing any problems that arise.

Goal

Make your website work well in all the browsers—remember it doesn’t have to look exactly the same, but it should be functional.

After fixing all the bugs in your website you’ll be taking screenshots of the final website and posting them to an Issue on GitHub.

Refer to the browser testing checklist ➔

  1. Collaboration

    This is collaborative. You personally don’t own all the devices you need to test your website on, but as a class you have all the devices.

    Work together to find out who has what device and with whom you can get your website tested.

1 Determine the available devices

Referring to the browser testing checklist, figure out what devices—and versions—need to be tested.

Poll the class to see who has what version available and make sure as many devices and versions are covered as possible.

Make a list on the board of what person has what browser and what version.

2 Test your website

Work together with your classmates to get your website tested in all the browsers available in the classroom.

You could assign versions to people and get them to look at everybody’s website in their assigned browser—taking screenshots and discussing errors as they go.

3 Fix problems

If there are any problems with your website in a specific browser—fix them.

Remember that your website doesn’t have to look exactly the same in every browser, but it should be functional and not look broken.

4 Save screenshots

After testing your website and everything looks good—take a screenshot of it.

Upload that screenshot to an Issue on GitHub named “Browser Testing”—in your repository.

Do not create an issue in my repository—create the issue in your forked repo. If your repo doesn’t have and Issues tab, go to Settings and turn it on.

Screenshot list

At an absolute minimum, there should be screenshots for at least these browsers. They’ll definitely be available in the class among your peers or easily installed.

  1. Firefox
  2. Chrome
  3. Edge
  4. Opera
  5. Safari, current version
  6. Safari, one version behind
  7. Internet Explorer, 11
  8. Opera Mini
  9. Chrome on Android
  10. iOS Safari, current version
  11. iOS Safari, one version behind
  12. Android browser, current version
  13. Android browser, one version behind
  14. UC Browser

Drop it into Markbot

Drop the final, coded exercise into Markbot and fix all the errors until Markbot gives you all green (and maybe a little yellow).

Be sure to keep the green check open to show the teacher!

  1. Can’t submit

    Markbot won’t let you submit this exercise because it’s getting checked by the teacher during class.