Skip to content

Commit

Permalink
Merge pull request #90 from kien-ht/feat/show-baseline-diff-compariso…
Browse files Browse the repository at this point in the history 
…n-screenshots-in-single-view-83

Enhancement: show baseline, diff, comparison screenshots in single view
  • Loading branch information
@PippoRaimondi
PippoRaimondi committed Jul 25, 2022
2 parents 3fda3c5 + 38c5047 commit 96e16f0
Show file tree
Hide file tree
Showing 3 changed files with 51 additions and 56 deletions.
Binary file modified report-example.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
54 changes: 26 additions & 28 deletions src/reporter/__snapshots__/reporter.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,9 @@ exports[`Reporter create report should create html template 1`] = `
span.pending {
color: grey;
}
.container-fluid {
padding: 0 50px;
}
.test-pass, .suite-pass {
background-color: #C8E6C9;
}
Expand All @@ -59,34 +62,28 @@ exports[`Reporter create report should create html template 1`] = `
background-color: rgba(255, 192, 0, 0.36);
margin-left:24px;
}
.screenshot {
margin-left:24px;
}
.screenshot-large {
height: 100%;
width: 100%;
}
.screenshot-column {
float: left;
width: 50%;
padding: 5px;
}
.table-test {
margin: 0px;
}
tr.test-row {
border-top: 2px solid white;
}
/* Clear floats after image containers */
.row::after {
content: \\"\\";
clear: both;
display: table;
table > tbody > tr.test-row > td {
padding-left: 0;
padding-right: 0;
}
.row {
display: flex;
gap: 10px;
margin: 0;
}
.row::after, .row::before {
display: none;
}
</style>
</head>
<body>
<div class=\\"container\\">
<div class=\\"container-fluid\\">
<div id=\\"report-header\\" class=\\"page-header\\"><h1></h1></div>
<h2>Results</h2>
<table>
Expand All @@ -111,27 +108,27 @@ exports[`Reporter create report should create html template 1`] = `
Visual Test 2
</td>
</tr>
<tr class=\\"test-row screenshot\\">
<tr class=\\"test-row\\">
<td colspan=\\"2\\">
<div class=\\"row\\">
<div class=\\"screenshot-column\\">
<div>
<h4>Baseline</h4>
<a href=\\"../cypress-visual-screenshots/baseline/Visual Test 2.png\\">
<img src=\\"../cypress-visual-screenshots/baseline/Visual Test 2.png\\" alt=\\"Snow\\" style=\\"width:100%\\">
</a>
</div>
<div class=\\"screenshot-column\\">
<h4>Comparison</h4>
<a href=\\"../cypress-visual-screenshots/comparison/Visual Test 2.png\\">
<img src=\\"../cypress-visual-screenshots/comparison/Visual Test 2.png\\" alt=\\"Snow\\" style=\\"width:100%\\">
</a>
</div>
<div class=\\"screenshot-column\\">
<div>
<h4>Diff</h4>
<a href=\\"../cypress-visual-screenshots/diff/Visual Test 2.png\\">
<img src=\\"../cypress-visual-screenshots/diff/Visual Test 2.png\\" alt=\\"Snow\\" style=\\"width:100%\\">
</a>
</div>
<div>
<h4>Comparison</h4>
<a href=\\"../cypress-visual-screenshots/comparison/Visual Test 2.png\\">
<img src=\\"../cypress-visual-screenshots/comparison/Visual Test 2.png\\" alt=\\"Snow\\" style=\\"width:100%\\">
</a>
</div>
</div>
</td>
</tr>
Expand All @@ -141,5 +138,6 @@ exports[`Reporter create report should create html template 1`] = `
</table>
</div>
</body>
</html>"
</html>
"
`;
53 changes: 25 additions & 28 deletions src/reporter/template.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,9 @@
span.pending {
color: grey;
}
.container-fluid {
padding: 0 50px;
}
.test-pass, .suite-pass {
background-color: #C8E6C9;
}
Expand All @@ -56,34 +59,28 @@
background-color: rgba(255, 192, 0, 0.36);
margin-left:24px;
}
.screenshot {
margin-left:24px;
}
.screenshot-large {
height: 100%;
width: 100%;
}
.screenshot-column {
float: left;
width: 50%;
padding: 5px;
}
.table-test {
margin: 0px;
}
tr.test-row {
border-top: 2px solid white;
}
/* Clear floats after image containers */
.row::after {
content: "";
clear: both;
display: table;
table > tbody > tr.test-row > td {
padding-left: 0;
padding-right: 0;
}
.row {
display: flex;
gap: 10px;
margin: 0;
}
.row::after, .row::before {
display: none;
}
</style>
</head>
<body>
<div class="container">
<div class="container-fluid">
<div id="report-header" class="page-header"><h1>{{title}}</h1></div>
<h2>Results</h2>
<table>
Expand All @@ -98,27 +95,27 @@
</td>
</tr>
{{#equal test.testStatus 'fail'}}
<tr class="test-row screenshot">
<tr class="test-row">
<td colspan="2">
<div class="row">
<div class="screenshot-column">
<div>
<h4>Baseline</h4>
<a href="../cypress-visual-screenshots/baseline/{{test.name}}.png">
<img src="../cypress-visual-screenshots/baseline/{{test.name}}.png" alt="Snow" style="width:100%">
</a>
</div>
<div class="screenshot-column">
<h4>Comparison</h4>
<a href="../cypress-visual-screenshots/comparison/{{test.name}}.png">
<img src="../cypress-visual-screenshots/comparison/{{test.name}}.png" alt="Snow" style="width:100%">
</a>
</div>
<div class="screenshot-column">
<div>
<h4>Diff</h4>
<a href="../cypress-visual-screenshots/diff/{{test.name}}.png">
<img src="../cypress-visual-screenshots/diff/{{test.name}}.png" alt="Snow" style="width:100%">
</a>
</div>
<div>
<h4>Comparison</h4>
<a href="../cypress-visual-screenshots/comparison/{{test.name}}.png">
<img src="../cypress-visual-screenshots/comparison/{{test.name}}.png" alt="Snow" style="width:100%">
</a>
</div>
</div>
</td>
</tr>
Expand All @@ -130,4 +127,4 @@
</table>
</div>
</body>
</html>
</html>

0 comments on commit 96e16f0

Please sign in to comment.