Skip to content
Permalink

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also or learn more about diff comparisons.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also . Learn more about diff comparisons here.
base repository: FRSOURCE/cypress-plugin-visual-regression-diff
Failed to load repositories. Confirm that selected base ref is valid, then try again.
Loading
base: v1.5.0
Choose a base ref
...
head repository: FRSOURCE/cypress-plugin-visual-regression-diff
Failed to load repositories. Confirm that selected head ref is valid, then try again.
Loading
compare: v1.6.0
Choose a head ref
  • 2 commits
  • 3 files changed
  • 2 contributors

Commits on Feb 25, 2022

  1. feat: show scrollbar for overflowing images 

    Signed-off-by: Jakub Freisler <[email protected]>
    @FRSgit
    FRSgit committed Feb 25, 2022

    Unverified

    This user has not yet uploaded their public signing key.
    GPG key ID: B96D4AF644056EC5
    Learn about vigilant mode
    Copy the full SHA
    de994b9 View commit details

  2. chore(release): 1.6.0 [skip ci] 

    # [1.6.0](v1.5.0...v1.6.0) (2022-02-25)

### Features

* show scrollbar for overflowing images ([de994b9](de994b9))
    @semantic-release-bot
    semantic-release-bot committed Feb 25, 2022
    Copy the full SHA
    683bf8a View commit details
Showing with 26 additions and 17 deletions.
  1. +7 −0 CHANGELOG.md
  2. +1 −1 package.json
  3. +18 −16 src/support.ts
7 changes: 7 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,10 @@
# [1.6.0](https://github.com/FRSOURCE/cypress-plugin-visual-regression-diff/compare/v1.5.0...v1.6.0) (2022-02-25)


### Features

* show scrollbar for overflowing images ([de994b9](https://github.com/FRSOURCE/cypress-plugin-visual-regression-diff/commit/de994b98ad3dea233aee70b0142992a309476e38))

# [1.5.0](https://github.com/FRSOURCE/cypress-plugin-visual-regression-diff/compare/v1.4.0...v1.5.0) (2022-02-24)


2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "@frsource/cypress-plugin-visual-regression-diff",
"description": "Perform visual regression test with a nice GUI as help. 💅 Only for Cypress!",
"version": "1.5.0",
"version": "1.6.0",
"author": "Jakub Freisler <jakub.freisler@frsource.org>",
"repository": "https://github.com/FRSOURCE/cypress-plugin-visual-regression-diff.git",
"sideEffects": false,
34 changes: 18 additions & 16 deletions src/support.ts
View file
Original file line number Diff line number Diff line change
@@ -21,7 +21,7 @@ function generateOverlayTemplate(
imgDiffBase64: string,
wasImageNotUpdatedYet: boolean
) {
return `<div class="${OVERLAY_CLASS} runner" style="position:fixed;z-index:10;top:0;bottom:0;left:0;right:0">
return `<div class="${OVERLAY_CLASS} runner" style="position:fixed;z-index:10;top:0;bottom:0;left:0;right:0;display:flex;flex-flow:column">
<header style="position:static">
<nav style="display:flex;width:100%;align-items:center;justify-content:space-between;padding:10px 15px;">
<h2>${title} - screenshot diff</h2>
@@ -35,22 +35,24 @@ function generateOverlayTemplate(
<form>
</nav>
</header>
<div style="margin:15px;display:flex;justify-content:space-evenly;align-items: flex-end">
<div
style="position:relative;background:#fff;border:solid 15px #fff"
onmouseover="this.querySelector('div').style.opacity=0,this.querySelector('img').style.opacity=1"
onmouseleave="this.querySelector('div').style.opacity=1,this.querySelector('img').style.opacity=0"
>
<h3>New screenshot:</h3>
<img style="min-width:300px;width:100%;opacity:0" src="data:image/png;base64,${imgNewBase64}" />
<div style="position:absolute;top:0;left:0;background:#fff">
<h3>Old screenshot (hover over to see the new one):</h3>
<img style="min-width:300px;width:100%" src="data:image/png;base64,${imgOldBase64}" />
<div style="padding:15px;overflow:auto">
<div style="display:flex;justify-content:space-evenly;align-items:flex-end">
<div
style="position:relative;background:#fff;border:solid 15px #fff"
onmouseover="this.querySelector('div').style.opacity=0,this.querySelector('img').style.opacity=1"
onmouseleave="this.querySelector('div').style.opacity=1,this.querySelector('img').style.opacity=0"
>
<h3>New screenshot:</h3>
<img style="min-width:300px;width:100%;opacity:0" src="data:image/png;base64,${imgNewBase64}" />
<div style="position:absolute;top:0;left:0;background:#fff">
<h3>Old screenshot (hover over to see the new one):</h3>
<img style="min-width:300px;width:100%" src="data:image/png;base64,${imgOldBase64}" />
</div>
</div>
</div>
<div style="background:#fff;border:solid 15px #fff">
<h3>Diff between new and old screenshot</h3>
<img style="min-width:300px;width:100%" src="data:image/png;base64,${imgDiffBase64}" />
<div style="background:#fff;border:solid 15px #fff">
<h3>Diff between new and old screenshot</h3>
<img style="min-width:300px;width:100%" src="data:image/png;base64,${imgDiffBase64}" />
</div>
</div>
</div>
</div>`;