@applitools/eyes-playwright 1.30.2 → 1.32.0

package/dist/fixture/reportRenderer.js

@@ -63,6 +63,7 @@ const getStatus = testStatuses => {
   let isAborted = false;
   let isNew = false;
   let isDifferent = false;
+  let isEmpty = true;
   testStatuses.forEach(testStatus => {
     const statusPriority = STATUS_PRIORITY.indexOf(testStatus.status.toLowerCase());
     maxPriority = Math.max(statusPriority, maxPriority);
@@ -70,6 +71,7 @@ const getStatus = testStatuses => {
     isAborted = isAborted || testStatus.isAborted;
     isNew = isNew || testStatus.isNew;
     isDifferent = isDifferent || testStatus.isDifferent;
+    if (testStatus.steps > 0) isEmpty = false;
   });
   let status = STATUS_PRIORITY[maxPriority];
 
@@ -77,6 +79,8 @@ const getStatus = testStatuses => {
     maxPriority = Math.max(2, maxPriority);
     status = STATUS_PRIORITY[maxPriority];
     statusText = Status.Aborted;
+  } else if (isEmpty) {
+    statusText = Status.Empty;
   } else if (status !== Status.Running && isNew) {
     statusText = Status.New;
   } else statusText = status;
@@ -86,22 +90,71 @@ const getStatus = testStatuses => {
   return {status, statusText, icon}
 };
 
+const getSingleSessionStatus = test => {
+  let maxPriority = Math.max(STATUS_PRIORITY.indexOf(test.status.toLowerCase()), 0);
+  let statusText;
+  let status = STATUS_PRIORITY[maxPriority];
+  const isEmpty = test.steps === 0;
+
+  if (test.isAborted) {
+    maxPriority = Math.max(2, maxPriority);
+    status = STATUS_PRIORITY[maxPriority];
+    statusText = Status.Aborted;
+  } else if (isEmpty) {
+    statusText = Status.Empty;
+  } else if (status !== Status.Running && test.isNew) {
+    statusText = Status.New;
+  } else statusText = status;
+
+  return {status, statusText}
+};
+
 class ReportRenderer {
   _statusPollingTimeout
+  _currentUrl = ''
 
   constructor(waitForResults) {
     this.waitForResults = waitForResults;
+    this.waitForResults.then(this.updatePlaywrightWithEyesResults);
   }
 
   render = () => {
-    window.onhashchange = this.handleUrlParams;
-    window.navigation.onnavigate = this.handleUrlParams;
-    window.navigation.oncurrententrychange = this.handleUrlParams;
+    window.addEventListener('hashchange', this.handleUrlParams);
     document.addEventListener('DOMContentLoaded', this.handleUrlParams);
+    window.addEventListener('popstate', this.handleUrlParams);
 
     this.observeDomChanges();
 
-    this.pollForTestsStatus();
+    this._pollAndForceRefresh();
+  }
+
+  _pollAndForceRefresh = async () => {
+    return this.pollForTestsStatus().then(() => this.waitForResults.then(this.updatePlaywrightWithEyesResults))
+  }
+
+  updatePlaywrightWithEyesResults = async results => {
+    await this.refreshReport(results);
+
+    window.onload();
+
+    const hash = this.getHashFromCurrentUrl();
+    const testId = hash.get('testId');
+    if (!testId) return
+
+    const test = results.eyesTestResult[testId];
+    if (!test) return
+
+    setTimeout(() => this.createEyesTestResults(test));
+  }
+
+  refreshReport = async ({testsFiles, report}) => {
+    const newZip = new JSZip();
+    const newFiles = {...testsFiles, 'report.json': report};
+    Object.keys(newFiles).forEach(fileName => {
+      newZip.file(fileName, JSON.stringify(newFiles[fileName]));
+    });
+    const generatedZip = await newZip.generateAsync({type: 'base64'});
+    window.playwrightReportBase64 = `data:application/zip;base64,${generatedZip}`;
   }
 
   getHashFromCurrentUrl = () => {
@@ -117,24 +170,60 @@ class ReportRenderer {
   }
 
   handleUrlParams = () => {
+    try {
+      const hash = this.getHashFromCurrentUrl();
+      const testId = hash.get('testId');
+
+      const fromTestToMain = !testId && this._currentUrl && !!this.getTestIdFromUrl(this._currentUrl);
+      if (fromTestToMain) {
+        this.waitForResults.then(testResults => {
+          this.refreshReport(testResults).then(() => {
+            window.onload();
+            this._handleMainPageChanges(hash);
+          });
+        });
+      } else this._handleMainPageChanges(hash);
+
+      if (!testId) return
+
+      const fromMainToTest = testId && this._currentUrl && !this.getTestIdFromUrl(this._currentUrl);
+
+      const shouldFilterUnresolved = this._currentUrl && this.getUnresolvedFilterFromUrl(this._currentUrl);
+      if (shouldFilterUnresolved && !unresolvedFilter) {
+        const newUrl = new URL(window.location.href);
+        newUrl.searchParams.set('unresolved', 'true');
+        window.location.replace(newUrl);
+      }
+
+      this.waitForResults.then(testResults => {
+        const test = testResults.eyesTestResult[testId];
+        if (!test) return
+
+        if (fromMainToTest) {
+          this.refreshReport(testResults).then(() => {
+            window.onload();
+            setTimeout(() => this.createEyesTestResults(test));
+          });
+        } else {
+          this.createEyesTestResults(test);
+        }
+      });
+    } finally {
+      this._currentUrl = window.location.href;
+    }
+  }
+  _handleMainPageChanges = hash => {
     this.cleanupExistingChips();
 
-    const hash = this.getHashFromCurrentUrl();
     const eyesFilter = hash.get('eyes');
     if (eyesFilter) document.getElementsByClassName('htmlreport')[0]?.classList.add('eyes-filter');
     else document.getElementsByClassName('htmlreport')[0]?.classList.remove('eyes-filter');
 
-    this.createLinkToBatch();
-
-    const testId = hash.get('testId');
-    if (!testId) return
-
-    this.waitForResults.then(testResults => {
-      const test = testResults.eyesTestResult[testId];
-      if (!test) return
+    const unresolvedFilter = hash.get('unresolved');
+    if (unresolvedFilter) document.getElementsByClassName('htmlreport')[0]?.classList.add('unresolved-filter');
+    else document.getElementsByClassName('htmlreport')[0]?.classList.remove('unresolved-filter');
 
-      this.createEyesTestResults(test);
-    });
+    this.createLinkToBatch();
   }
   getHashValueFromUrl = (url, key) => {
     const hash = this.getHashFromUrlString(url);
@@ -146,6 +235,9 @@ class ReportRenderer {
   getEyesFilterFromUrl = url => {
     return this.getHashValueFromUrl(url, 'eyes')
   }
+  getUnresolvedFilterFromUrl = url => {
+    return this.getHashValueFromUrl(url, 'unresolved')
+  }
 
   observeDomChanges = () => {
     const mutationObserver = new MutationObserver(this.handleDomChanges);
@@ -167,6 +259,9 @@ class ReportRenderer {
           if (this.getEyesFilterFromUrl(window.location.href)) {
             node.classList.add('eyes-filter');
           }
+          if (this.getUnresolvedFilterFromUrl(window.location.href)) {
+            node.classList.add('unresolved-filter');
+          }
         }
 
         if (node.getElementsByClassName('header-view-status-container').length > 0) {
@@ -194,14 +289,16 @@ class ReportRenderer {
       const test = testResults.eyesTestResult[testId];
       if (!test) return
 
+      const status = getStatus(test.eyesResults);
       testElement.parentNode.classList.add('eyes-test');
+      testElement.parentNode.setAttribute('status', status.status.toLowerCase());
 
       const eyesInfo = document.createElement('div');
       eyesInfo.classList.add('eyes-info');
       const eyesInfoLink = document.createElement('a');
       eyesInfoLink.classList.add('eyes-info-link');
       eyesInfoLink.href = href;
-      eyesInfo.innerHTML = this.createEyesInfo(test.eyesResults);
+      eyesInfo.innerHTML = this.createEyesInfo(status);
       eyesInfoLink.appendChild(eyesInfo);
       testElement.appendChild(eyesInfoLink);
     });
@@ -209,9 +306,10 @@ class ReportRenderer {
   createFilters = () => {
     const allFilters = document.getElementsByClassName('subnav-item');
     const lastFilter = allFilters[allFilters.length - 1];
+
     const eyesFilter = lastFilter.cloneNode(true);
     eyesFilter.id = 'eyes-filter';
-    eyesFilter.firstChild.textContent = 'Eyes VisualAI ';
+    eyesFilter.firstChild.textContent = 'Eyes ';
     this.waitForResults.then(result => {
       eyesFilter.lastChild.textContent = Object.keys(result.eyesTestResult).length;
     });
@@ -219,6 +317,19 @@ class ReportRenderer {
     lastFilter.parentNode.appendChild(eyesFilter);
 
     eyesFilter.href = '#eyes=true';
+
+    const unresolvedFilter = lastFilter.cloneNode(true);
+    unresolvedFilter.id = 'unresolved-filter';
+    unresolvedFilter.firstChild.textContent = 'Unresolved ';
+    this.waitForResults.then(
+      result =>
+        (unresolvedFilter.lastChild.textContent = Object.values(result.eyesTestResult).filter(
+          test => getStatus(test.eyesResults).status === 'unresolved',
+        ).length),
+    );
+    lastFilter.parentNode.appendChild(unresolvedFilter);
+
+    unresolvedFilter.href = '#unresolved=true';
   }
   createLinkToBatch = async () => {
     const link = document.getElementsByClassName('eyes-batch-link')[0];
@@ -231,16 +342,18 @@ class ReportRenderer {
     }
 
     if (link) return
+
+    const firstResultsElement = document.getElementsByClassName('chip')[0];
+    const urlContainer = document.createElement('div');
+    urlContainer.classList.add('eyes-batch-link');
+    firstResultsElement?.parentNode?.insertBefore(urlContainer, firstResultsElement);
+
     const testResults = await this.waitForResults;
     const firstResult = Object.values(testResults.eyesTestResult)[0]?.eyesResults[0];
 
     if (!firstResult) return
 
-    const firstResultsElement = document.getElementsByClassName('chip')[0];
-    const urlContainer = document.createElement('div');
-    urlContainer.classList.add('eyes-batch-link');
     urlContainer.innerHTML = `<a target='_blank' href=${firstResult.appUrls.batch}>Results in Eyes Dashboard</a>`;
-    firstResultsElement?.parentNode?.insertBefore(urlContainer, firstResultsElement);
   }
 
   fixUrl = url => {
@@ -266,6 +379,51 @@ class ReportRenderer {
     });
   }
   onTestResultPageReady = test => {
+    const shouldFilterUnresolved = new URLSearchParams(window.location.search).get('unresolved');
+
+    const frontendPath = new URLSearchParams(window.location.search).get('frontendPath');
+    const iframeSrc = `app/html-report/index.html?${frontendPath != null ? `frontendPath=${frontendPath}&` : ''}${
+      shouldFilterUnresolved ? 'unresolved=true&' : ''
+    }cache=${Date.now()}&`; // TODO remove cache and use fixed version
+
+    this._observeRetryTabSlectionChanged(test, iframeSrc, shouldFilterUnresolved);
+
+    let currentSelectedRetryIndex = Array.from(document.getElementsByClassName('tabbed-pane-tab-element')).findIndex(
+      tab => tab.classList.contains('selected'),
+    );
+    this._createEyesResultIframes(test, iframeSrc, currentSelectedRetryIndex, shouldFilterUnresolved);
+  }
+  _observeRetryTabSlectionChanged = (test, iframeSrc) => {
+    const retryTabs = document.getElementsByClassName('tabbed-pane-tab-element');
+    let selectedRetryIndex = Array.from(retryTabs).findIndex(tab => tab.classList.contains('selected'));
+
+    const mutationObserver = new MutationObserver(() => {
+      mutationObserver.disconnect();
+
+      const newSelectedRetryIndex = Array.from(retryTabs).findIndex(tab => tab.classList.contains('selected'));
+      if (newSelectedRetryIndex === selectedRetryIndex) return
+      selectedRetryIndex = newSelectedRetryIndex;
+
+      mutationObserver.observe(retryTabs[selectedRetryIndex], {
+        attributes: true,
+        characterData: false,
+        childList: false,
+        subtree: false,
+        attributeOldValue: false,
+        characterDataOldValue: false,
+      });
+      this._createEyesResultIframes(test, iframeSrc, selectedRetryIndex, shouldFilterUnresolved);
+    });
+    mutationObserver.observe(retryTabs[selectedRetryIndex], {
+      attributes: true,
+      characterData: false,
+      childList: false,
+      subtree: false,
+      attributeOldValue: false,
+      characterDataOldValue: false,
+    });
+  }
+  _createTemplateChip = () => {
     const firstChip = document.getElementsByClassName('chip')[0];
     const chipTemplate = firstChip.cloneNode(true);
     chipTemplate.classList.add('eyes-test-results');
@@ -283,52 +441,80 @@ class ReportRenderer {
     const chipTemplateBody = chipTemplate.querySelector('.chip-body');
     chipTemplateBody.innerHTML = '';
 
-    this.cleanupExistingChips();
+    return {chipTemplate, chipTemplateHeader, firstChip}
+  }
+  _createChipForTest = (result, chipTemplate, chipTemplateHeader) => {
+    const chip = chipTemplate.cloneNode(true);
+    chip.setAttribute('value', result.id);
+    chip.querySelector('.chip-header').onclick = chipTemplateHeader.onclick;
+
+    const sessionText = `${result.hostApp} ${result.hostDisplaySize.width} x ${result.hostDisplaySize.height}`;
 
-    const iframeSrc = `app/html-report/index.html?${
-      new URLSearchParams(window.location.search).get('frontend') != null
-        ? 'frontendPath=html-report/dev/playwright&'
-        : 'frontendPath=html-report/dev/playwright&' // TODO remove frontendPath when there is no frontend param in the url
-    }`;
+    chip.querySelector(
+      '.chip-header-text',
+    ).innerHTML = `Eyes Test Results <span class="test-header-info"> - ${sessionText} <div class="eyes-info">${this.createEyesInfo(
+      getSingleSessionStatus(result),
+      false,
+    )}</div><a href=${result.appUrls.session} target='_blank' title='View in Eyes Dashboard'>
+        <span>${window.__icons.link}</span>
+      </a></span>`;
 
-    test.eyesResults.forEach((result, index) => {
-      const iframe = document.createElement('iframe');
-      iframe.classList.add('eyes-session-result');
-      iframe.setAttribute('value', result.id);
+    chip.querySelector('.chip-header-text a').onclick = event => event.stopPropagation();
 
-      const url = this.fixUrl(result.eyesServer.eyesServerUrl);
+    return chip
+  }
+  _createTestIframe = (iframeSrc, result) => {
+    const iframe = document.createElement('iframe');
+    iframe.classList.add('eyes-session-result');
+    iframe.setAttribute('value', result.id);
 
-      iframe.onload = () => {
-        const iframeUrl = `${url}app/html-report/index.html`;
-        iframe.contentWindow.postMessage({call: 'sendValue', value: result}, iframeUrl);
+    const url = this.fixUrl(result.eyesServer.eyesServerUrl);
 
-        iframe.classList.add('ready');
+    iframe.onload = () => {
+      const iframeUrl = `${url}app/html-report/index.html`;
+      iframe.contentWindow.postMessage({call: 'sendValue', value: result}, iframeUrl);
 
-        window.addEventListener('message', async event => {
-          if (event.origin !== url && `${event.origin}/` !== url) return
-          if (event.data === 'forceRefreshData') return this.pollForTestsStatus()
-        });
-      };
+      iframe.classList.add('ready');
+
+      window.addEventListener('message', async event => {
+        if (event.origin !== url && `${event.origin}/` !== url) return
+        if (event.data === 'forceRefreshData') return this.pollForTestsStatus()
+        // if (event.data === 'forceRefreshData') return this._pollAndForceRefresh()
+      });
+    };
+
+    iframe.src = `${url}${iframeSrc}`;
+
+    return iframe
+  }
+  _createEyesResultIframes = (test, iframeSrc, selectedRetryIndex, shouldFilterUnresolved) => {
+    this.cleanupExistingChips();
 
-      iframe.src = `${url}${iframeSrc}cache=${Date.now()}`; // TODO remove cache and use fixed version
-      const chip = chipTemplate.cloneNode(true);
-      chip.querySelector('.chip-header').onclick = chipTemplateHeader.onclick;
+    const {chipTemplate, chipTemplateHeader, firstChip} = this._createTemplateChip();
 
-      const sessionText = `${result.hostApp} ${result.hostDisplaySize.width} x ${result.hostDisplaySize.height}`;
+    let createdIframes = 0;
+    test.eyesResults.forEach(result => {
+      if (result.playwrightRetry !== selectedRetryIndex) return
 
-      chip.querySelector(
-        '.chip-header-text',
-      ).innerHTML = `Eyes Test Results <span class="test-header-info"> - ${sessionText} <a href=${result.appUrls.session} target='_blank' title='View in Eyes Dashboard'>
-          <span>${window.__icons.link}</span>
-        </a></span>`;
+      if (shouldFilterUnresolved && getStatus([result]).status !== 'unresolved') return
 
-      chip.querySelector('.chip-header-text a').onclick = event => event.stopPropagation();
+      const chip = this._createChipForTest(result, chipTemplate, chipTemplateHeader);
+      const chipBody = chip.querySelector('.chip-body');
 
-      chip.querySelector('.chip-body').appendChild(iframe);
+      let bodyElement;
+      if (result.steps === 0) {
+        bodyElement = document.createElement('div');
+        bodyElement.innerHTML = 'No steps were executed for this test';
+        chipBody.classList.add('empty');
+      } else bodyElement = this._createTestIframe(iframeSrc, result);
+
+      chipBody.appendChild(bodyElement);
       firstChip.parentNode.appendChild(chip);
-      if (index > 0) {
+      if (createdIframes > 0) {
         chip.querySelector('.chip-header').click();
       }
+
+      ++createdIframes;
     });
   }
 
@@ -397,6 +583,7 @@ class ReportRenderer {
       }, {});
 
       this.waitForResults = this.mergeResults(testResults, statusBySessionId);
+      this.waitForResults.then(this.refreshReport);
 
       this.refreshEyesTestsStatus();
       this.refreshCurrentTestStatus();
@@ -423,10 +610,33 @@ class ReportRenderer {
           step.expectedImageSize = expectedAppOutput?.image.size;
           step.actualImageSize = actualAppOutput?.image.size;
           step.appOutputResolution = appOutputResolution;
+          step.expectedAppOutput = expectedAppOutput;
+          step.actualAppOutput = actualAppOutput;
         });
       });
     });
 
+    Object.values(testResults.testsFiles).forEach(testFile => {
+      const fileInReport = testResults.report.files.find(file => file.fileId === testFile.fileId);
+      const reportStats = testResults.report.stats;
+      testFile.tests.forEach(test => {
+        const eyesResultsForTest = testResults.eyesTestResult[test.testId]?.eyesResults;
+        if (!eyesResultsForTest) return
+
+        // go over the test retries and get the eyes results
+        const eyesStatuses = test.results.reduce((results, _result) => {
+          const eyesResultsForRun = eyesResultsForTest.filter(result => result.playwrightRetry === _result.retry);
+          if (eyesResultsForRun.length > 0) {
+            // get eyes status for the current retry, so we can later get the status of the test
+            results.push(getStatus(eyesResultsForTest).status);
+          } else results.push(null);
+          return results
+        }, []);
+
+        updatePlaywrightTestStatus(test, fileInReport, reportStats, eyesStatuses);
+      });
+    });
+
     return testResults
   }
   refreshEyesTestsStatus = async () => {
@@ -441,12 +651,30 @@ class ReportRenderer {
       const testEyesResults = eyesTestResult[testId]?.eyesResults;
       if (!testEyesResults) return
 
-      testElement.getElementsByClassName('eyes-info')[0].innerHTML = this.createEyesInfo(testEyesResults);
+      const status = getStatus(testEyesResults);
+      testElement.setAttribute('status', status.status.toLowerCase());
+
+      testElement.getElementsByClassName('eyes-info')[0].innerHTML = this.createEyesInfo(status);
+    });
+
+    const hash = this.getHashFromCurrentUrl();
+    const testId = hash.get('testId');
+    if (!testId) return
+    const testEyesResults = eyesTestResult[testId]?.eyesResults;
+    if (!testEyesResults) return
+
+    const sessionChips = document.getElementsByClassName('eyes-test-results');
+
+    Array.from(sessionChips).forEach(chip => {
+      const sessionId = chip.getAttribute('value');
+      const sessionResults = eyesTestResult[testId]?.eyesResults.find(result => result.id === sessionId);
+
+      const status = getSingleSessionStatus(sessionResults);
+      chip.getElementsByClassName('eyes-info')[0].innerHTML = this.createEyesInfo(status, false);
     });
   }
-  createEyesInfo = testStatuses => {
-    const status = getStatus(testStatuses);
-    return `<span class="visual-test-icon">${window.__icons.visualTest}</span>
+  createEyesInfo = (status, addVisualIcon = true) => {
+    return `${addVisualIcon ? `<span class="visual-test-icon">${window.__icons.visualTest}</span>` : ''}
             <div class="status-bar ${status.status.toLowerCase()}"></div>
             <span class="status-text">${status.statusText}</span>`
   }
@@ -485,6 +713,46 @@ class ReportRenderer {
   }
 }
 
+function getOutcomeFromEyesStatuses(eyesStatuses, testOutcome) {
+  return eyesStatuses.every(status => status === 'unresolved' || status === 'failed')
+    ? 'unexpected'
+    : eyesStatuses.some(status => status === 'unresolved' || status === 'failed')
+    ? 'flaky'
+    : testOutcome
+}
+function getRunStatusFromEyesStatuses(eyesStatus, runStatus) {
+  return eyesStatus === 'unresolved' || eyesStatus === 'failed' ? 'failed' : runStatus
+}
+
+function updatePlaywrightTestStatus(test, fileInReport, reportStats, eyesStatuses, updateOriginalOutcome = false) {
+  if (
+    eyesStatuses.filter(status => status !== null).length > 0 &&
+    // test outcome: 'skipped' | 'expected' | 'unexpected' | 'flaky';
+    ['expected', 'flaky'].includes(test.originalOutcome ?? test.outcome)
+  ) {
+    test.results.forEach((_result, index) => {
+      const eyesStatus = eyesStatuses[index];
+      // run status: 'passed' | 'failed' | 'timedOut' | 'skipped' | 'interrupted'
+      if ((_result.originalStatus ?? _result.status) === 'passed' && eyesStatus !== null) {
+        if (updateOriginalOutcome) _result.originalStatus = _result.status;
+        _result.status = getRunStatusFromEyesStatuses(eyesStatus, _result.originalStatus);
+      }
+    });
+
+    const testInReport = fileInReport.tests.find(testInReport => testInReport.testId === test.testId);
+    if (updateOriginalOutcome) testInReport.originalOutcome = test.originalOutcome = test.outcome;
+    const newOutcome = getOutcomeFromEyesStatuses(
+      eyesStatuses.filter(status => status !== null),
+      test.originalOutcome,
+    );
+    if (testInReport.outcome !== newOutcome) {
+      reportStats[testInReport.outcome]--;
+      reportStats[newOutcome]++;
+    }
+    testInReport.outcome = test.outcome = newOutcome;
+  }
+}
+
 async function getTestResults() {
   const base64Data = window.playwrightReportBase64.replace('data:application/zip;base64,', '');
   const zip = new JSZip();
@@ -501,19 +769,32 @@ async function getTestResults() {
   );
 
   const reportFile = await zip.file('report.json').async('text');
+  const reportFileData = JSON.parse(reportFile);
 
   const testsFiles = Object.assign({}, ...resultsByTestFile);
 
   const sessionsByBatchId = {};
 
   const eyesTestsById = Object.values(testsFiles).reduce((eyesTests, testFile) => {
+    const fileInReport = reportFileData.files.find(file => file.fileId === testFile.fileId);
+    const reportStats = reportFileData.stats;
     testFile.tests.forEach(test => {
+      const eyesStatuses = [];
+
+      // go over the test retries and get the eyes results
       const eyesResults = test.results.reduce((results, _result, index) => {
         const eyesResultsForTest = __testResultsMap[`${test.testId}--${index}`];
         if (eyesResultsForTest) {
           results.push(...eyesResultsForTest);
+
+          // get eyes status for the current retry, so we can later get the status of the test
+          eyesStatuses.push(getStatus(eyesResultsForTest).status);
+
           eyesResultsForTest.forEach(eyesResult => {
+            //set retry number for session
             eyesResult.playwrightRetry = _result.retry || 0;
+
+            // initialize sessionsByBatchId so later we can get the status of the tests (the request is per batch)
             if (!sessionsByBatchId[eyesResult.batchId])
               sessionsByBatchId[eyesResult.batchId] = {
                 sessions: [],
@@ -525,11 +806,14 @@ async function getTestResults() {
               accessToken: eyesResult.secretToken,
             });
           });
-        }
+        } else eyesStatuses.push(null);
         return results
       }, []);
 
-      if (eyesResults.length > 0) eyesTests[test.testId] = {...test, eyesResults};
+      if (eyesResults.length > 0) {
+        updatePlaywrightTestStatus(test, fileInReport, reportStats, eyesStatuses, true);
+        eyesTests[test.testId] = {...test, eyesResults};
+      }
     });
 
     return eyesTests
@@ -537,7 +821,7 @@ async function getTestResults() {
 
   return {
     testsFiles: testsFiles,
-    report: JSON.parse(reportFile),
+    report: reportFileData,
     eyesTestResult: eyesTestsById,
     sessionsByBatchId,
   }

package/dist/fixture/reporterStyle.css

@@ -7,13 +7,22 @@
   height: 850px;
 }
 
+.eyes-test-results>.chip-body.empty {
+  height: auto;
+  padding: 16px;
+}
+
 .eyes-test-results>.chip-body>iframe {
   width: 100%;
   height: 100%;
   border: none;
 }
 
-.eyes-filter .test-file-test:not(.eyes-test){
+.eyes-filter .test-file-test:not(.eyes-test) {
+  display: none;
+}
+
+.unresolved-filter .test-file-test:not(.eyes-test[status=unresolved]) {
   display: none;
 }
 
@@ -25,6 +34,8 @@
 
 .eyes-info {
   display: flex;
+  align-items: center;
+  line-height: 16px
 }
 .eyes-info-link {
   text-decoration: none;
@@ -44,6 +55,9 @@
 .test-header-info>a>span {
   display: inline-flex;
 }
+.test-header-info>.eyes-info {
+  margin-left: 5px;
+}
 
 .visual-test-icon {
   text-align: center;
@@ -51,14 +65,13 @@
   font-size: 24px;
   height: 26px;
   width: 26px;
-  margin-right: 5px;
+  display: grid;
 }
 .eyes-info>.status-text {
   font-size: 14px;
   text-align: center;
   vertical-align: middle;
   margin: auto;
-  color: rgba(0, 0, 0, 0.35);
   text-transform: capitalize;
   padding: 0 5px;
 }
@@ -69,7 +82,7 @@
   width: 5px;
 }
 .eyes-info>.status-bar.aborted {
-  background: #ff8f00;
+  background: #e80600;
 }
 .eyes-info>.status-bar.unresolved {
   background: #ff8f00;