Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Visual testing guide #1536

Merged
merged 16 commits into from May 15, 2019

Conversation

3 participants
@bahmutov
Copy link
Collaborator

commented Apr 1, 2019

  • closes #1535
  • it would be nice to include a visual diff image for the ".completed" style change that catches the visual regression

bahmutov added some commits Apr 1, 2019

bahmutov added some commits Apr 20, 2019

@bahmutov

This comment has been minimized.

Copy link
Collaborator Author

commented May 13, 2019

@jennifer-shehane I have added Applitools links, so now it would be nice to get this page merged

@bahmutov bahmutov changed the title WIP: visual testing guide Visual testing guide May 13, 2019

@bahmutov

This comment has been minimized.

Copy link
Collaborator Author

commented May 13, 2019

@mapsandapps could you give a quick look to this visual testing guide, please? Since you have used it with the services, it would be nice to see if I missed something that developers should know here

@jennifer-shehane
Copy link
Member

left a comment

This is a really nice guide. I made some changes, mostly in how to visually show the content so that it's a bit easier to scan. Plus the usual editing.

Need to update links.yml to include visual-testing in on.cypress.io before this can go out cypress-io/cypress-services#652


Luckily, Cypress gives a stable platform for writing plugins that _can perform visual testing_. Typically such plugins take an image snapshot of the entire application or a specific element, and then compare the image to a previously approved baseline image. If the images are the same (within pixel tolerance), the web application looks the same to the user. If there are differences, then there is some change in the DOM layout, fonts, colors or other visual properties that needs to be investigated.

For example one can use {% url 'cypress-plugin-snapshots' https://github.com/meinaart/cypress-plugin-snapshots %} plugin and catch the following visual regression:

This comment has been minimized.

Copy link
@jennifer-shehane

jennifer-shehane May 14, 2019

Member

I know the majority of this page is based on outside plugin code...so it seems necessary, but I cringe a bit writing code in our docs that is dependent on the API of a plugin outside of our control.

This comment has been minimized.

Copy link
@bahmutov

bahmutov May 14, 2019

Author Collaborator

absolutely, but think of this page as take-off point for jumping into 3rd party services

This comment has been minimized.

Copy link
@bahmutov

bahmutov May 14, 2019

Author Collaborator

why is THIS pull request blocked by cypress-io/cypress-services#652 ? isn't the on redirect a nice to have, but independent feature?

This comment has been minimized.

Copy link
@jennifer-shehane

jennifer-shehane May 15, 2019

Member

hmm, I don't know. I just expect the redirects to work before releasing. Having on.cypress.io in the monorepo I think is a bit of a mistake due to it's release cycle though.

Show resolved Hide resolved source/guides/tooling/visual-testing.md Outdated

jennifer-shehane added some commits May 14, 2019

Editing visual-testing guide
- Add ‘note’ blocks
- Update header levels
- Add tables for tools instead of lists
- Add content about how to test css functionally
- Add ‘best practices’ notes
- Add more ‘see also’ links
@bahmutov

This comment has been minimized.

Copy link
Collaborator Author

commented May 14, 2019

do you think we need more editing here or this is good as v1.0 of the guide @jennifer-shehane ?

@mapsandapps

This comment has been minimized.

Copy link

commented May 14, 2019

Looks super useful to me. I also found the Applitools and Percy official Cypress integration tutorials to be useful:

bahmutov added some commits May 14, 2019

@bahmutov bahmutov merged commit c6412ed into develop May 15, 2019

3 checks passed

ci/circleci: build Your tests passed on CircleCI!
Details
ci/circleci: docs-tests Your tests passed on CircleCI!
Details
license/cla Contributor License Agreement is signed.
Details
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.