' +
7 | '
' +
10 | '
'
11 | );
12 | }
13 |
14 | function findImage(data, name) {
15 | if (data.testStage && data.testStage.attachments) {
16 | var matchedImage = data.testStage.attachments.filter(function (attachment) {
17 | return attachment.name === name;
18 | })[0];
19 | if (matchedImage) {
20 | return 'data/attachments/' + matchedImage.source;
21 | }
22 | }
23 | return null;
24 | }
25 |
26 | function renderDiffContent(type, diffImage, actualImage, expectedImage) {
27 | if (type === 'diff') {
28 | if (diffImage) {
29 | return renderImage(diffImage);
30 | }
31 | }
32 | if (type === 'overlay' && expectedImage) {
33 | return (
34 | '' +
35 | '
' +
38 | '
'
44 | );
45 | }
46 | if (actualImage) {
47 | return renderImage(actualImage);
48 | }
49 | return 'No diff data provided';
50 | }
51 |
52 | var TestResultView = Backbone.Marionette.View.extend({
53 | regions: {
54 | subView: '.screen-diff-view',
55 | },
56 | template: function () {
57 | return '';
58 | },
59 | onRender: function () {
60 | var data = this.model.toJSON();
61 | var testType = data.labels.filter(function (label) {
62 | return label.name === 'testType';
63 | })[0];
64 | var diffImage = findImage(data, 'diff');
65 | var actualImage = findImage(data, 'actual');
66 | var expectedImage = findImage(data, 'expected');
67 | if (!testType || testType.value !== 'screenshotDiff') {
68 | return;
69 | }
70 | this.showChildView(
71 | 'subView',
72 | new ScreenDiffView({
73 | diffImage: diffImage,
74 | actualImage: actualImage,
75 | expectedImage: expectedImage,
76 | }),
77 | );
78 | },
79 | });
80 | var ErrorView = Backbone.Marionette.View.extend({
81 | templateContext: function () {
82 | return this.options;
83 | },
84 | template: function (data) {
85 | return '' +
39 | '
' +
42 | '
' +
43 | '' + data.error + ''; 86 | }, 87 | }); 88 | var AttachmentView = Backbone.Marionette.View.extend({ 89 | regions: { 90 | subView: '.screen-diff-view', 91 | }, 92 | template: function () { 93 | return ''; 94 | }, 95 | onRender: function () { 96 | jQuery 97 | .getJSON(this.options.sourceUrl) 98 | .then(this.renderScreenDiffView.bind(this), this.renderErrorView.bind(this)); 99 | }, 100 | renderErrorView: function (error) { 101 | console.log(error); 102 | this.showChildView( 103 | 'subView', 104 | new ErrorView({ 105 | error: error.statusText, 106 | }), 107 | ); 108 | }, 109 | renderScreenDiffView: function (data) { 110 | this.showChildView( 111 | 'subView', 112 | new ScreenDiffView({ 113 | diffImage: data.diff, 114 | actualImage: data.actual, 115 | expectedImage: data.expected, 116 | }), 117 | ); 118 | }, 119 | }); 120 | 121 | var ScreenDiffView = Backbone.Marionette.View.extend({ 122 | className: 'pane__section', 123 | events: function () { 124 | return { 125 | ['click [name="screen-diff-type-' + this.cid + '"]']: 'onDiffTypeChange', 126 | 'mousemove .screen-diff__overlay': 'onOverlayMove', 127 | }; 128 | }, 129 | initialize: function (options) { 130 | this.diffImage = options.diffImage; 131 | this.actualImage = options.actualImage; 132 | this.expectedImage = options.expectedImage; 133 | this.radioName = 'screen-diff-type-' + this.cid; 134 | }, 135 | templateContext: function () { 136 | return { 137 | diffType: settings.get('diffType'), 138 | diffImage: this.diffImage, 139 | actualImage: this.actualImage, 140 | expectedImage: this.expectedImage, 141 | radioName: this.radioName, 142 | }; 143 | }, 144 | template: function (data) { 145 | if (!data.diffImage && !data.actualImage && !data.expectedImage) { 146 | return ''; 147 | } 148 | 149 | return ( 150 | '
Screen Diff
' + 151 | '' +
152 | '
'
167 | );
168 | },
169 | adjustImageSize: function (event) {
170 | var overImage = this.$(event.target);
171 | overImage.width(overImage.width());
172 | },
173 | onRender: function () {
174 | const diffType = settings.get('diffType');
175 | this.$('[name="' + this.radioName + '"][value="' + diffType + '"]').prop(
176 | 'checked',
177 | true,
178 | );
179 | if (diffType === 'overlay') {
180 | this.$('.screen-diff__image-over img').on('load', this.adjustImageSize.bind(this));
181 | }
182 | },
183 | onOverlayMove: function (event) {
184 | var pageX = event.pageX;
185 | var containerScroll = this.$('.screen-diff__container').scrollLeft();
186 | var elementX = event.currentTarget.getBoundingClientRect().left;
187 | var delta = pageX - elementX + containerScroll;
188 | this.$('.screen-diff__image-over').width(delta);
189 | },
190 | onDiffTypeChange: function (event) {
191 | settings.save('diffType', event.target.value);
192 | this.render();
193 | },
194 | });
195 | allure.api.addTestResultBlock(TestResultView, { position: 'before' });
196 | allure.api.addAttachmentViewer('application/vnd.allure.image.diff', {
197 | View: AttachmentView,
198 | icon: 'fa fa-exchange',
199 | });
200 | })();
201 |
--------------------------------------------------------------------------------
/allure-report/data/test-cases/7166155252d1e42c.json:
--------------------------------------------------------------------------------
1 | {"uid":"7166155252d1e42c","name":"testLoginPositive","fullName":"com.thetestingacademy.vwo.LoginTests.LoginTest.testLoginPositive","historyId":"23d8051b95617db64274268a86892902","time":{"start":1700978265128,"stop":1700978265130,"duration":2},"status":"skipped","statusMessage":"Unable to establish websocket connection to http://localhost:60854/devtools/browser/8d59d957-0311-4d61-9f33-dde1cb90d39f\nBuild info: version: '4.7.2', revision: '4d4020c3b7'\nSystem info: os.name: 'Mac OS X', os.arch: 'x86_64', os.version: '12.5', java.version: '19.0.1'\nDriver info: driver.version: EdgeDriver","statusTrace":"org.openqa.selenium.remote.http.ConnectionFailedException: Unable to establish websocket connection to http://localhost:60854/devtools/browser/8d59d957-0311-4d61-9f33-dde1cb90d39f\nBuild info: version: '4.7.2', revision: '4d4020c3b7'\nSystem info: os.name: 'Mac OS X', os.arch: 'x86_64', os.version: '12.5', java.version: '19.0.1'\nDriver info: driver.version: EdgeDriver\n\tat org.openqa.selenium.remote.http.netty.NettyWebSocket.' +
153 | '' +
156 | '' +
159 | '
' +
160 | renderDiffContent(
161 | data.diffType,
162 | data.diffImage,
163 | data.actualImage,
164 | data.expectedImage,
165 | ) +
166 | '