XCTest HTML Report

https://github.com/xctesthtmlreport/xctesthtmlreport
Admin
Xcode-like HTML report generator for Unit and UI Tests with support for parallel testing,...
Tokens:13,061
Snippets:123
Trust Score:5.4
License:MIT
Update:4 months ago
Show doc for...
Tokens:
Raw
### Install Latest Version from Main Branch via Mint

Source: https://github.com/xctesthtmlreport/xctesthtmlreport/blob/main/README.md

Install the most recent version from the main branch using Mint with the @main tag.

```bash
mint install XCTestHTMLReport/XCTestHTMLReport@main
```

--------------------------------

### Install Latest Stable Version via Homebrew

Source: https://github.com/xctesthtmlreport/xctesthtmlreport/blob/main/README.md

Use this command to install the latest stable release of xctesthtmlreport using Homebrew.

```bash
brew install xctesthtmlreport
```

--------------------------------

### Install Latest Version from Main Branch via Homebrew

Source: https://github.com/xctesthtmlreport/xctesthtmlreport/blob/main/README.md

Install the most recent version directly from the main branch using Homebrew with the --HEAD flag.

```bash
brew install xctesthtmlreport --HEAD
```

--------------------------------

### Install Latest Stable Version via Mint

Source: https://github.com/xctesthtmlreport/xctesthtmlreport/blob/main/README.md

Install the latest stable version of XCTestHTMLReport using the Mint package manager.

```bash
mint install XCTestHTMLReport/XCTestHTMLReport
```

--------------------------------

### Initialize Drag for Sidebar Resizing

Source: https://github.com/xctesthtmlreport/xctesthtmlreport/blob/main/Sources/XCTestHTMLReportCore/HTML/index.html

Sets up the initial state for dragging when a resizer element is clicked. It captures the starting mouse position and the initial width of the sidebar to be resized.

```javascript
function initDrag(e) { sidebar = e.target.parentElement; startX = e.clientX; startWidth = parseInt(document.defaultView.getComputedStyle(sidebar).width, 10); originalSidebarWidth = sidebar.clientWidth; document.documentElement.addEventListener('mousemove', doDrag, false); document.documentElement.addEventListener('mouseup', stopDrag, false); document.body.classList.add('dragging'); }
```

--------------------------------

### Get SHA256 Checksum for Release Archive

Source: https://github.com/xctesthtmlreport/xctesthtmlreport/wiki/Release-a-new-version

Use curl to download the release archive and then shasum to calculate its SHA256 checksum. This is useful for verifying the integrity of the downloaded release file.

```shell
$ curl -L "https://github.com/TitouanVanBelle/XCTestHTMLReport/archive/1.6.1.tar.gz" -o 1.6.1.tar.gz"
$ shasum -a 256 1.6.1.tar.gz
```

--------------------------------

### Get Visible List Items

Source: https://github.com/xctesthtmlreport/xctesthtmlreport/blob/main/Sources/XCTestHTMLReportCore/HTML/index.html

Filters all elements with the class 'list-item' to return only those that are currently visible on the page. This is useful for navigation and selection logic.

```javascript
function visibleListItems() { var array = Array.prototype.slice.call(listItems); return array.filter(function(el) { return el.offsetParent != null; }) }
```

--------------------------------

### Show All Scenarios

Source: https://github.com/xctesthtmlreport/xctesthtmlreport/blob/main/Sources/XCTestHTMLReportCore/HTML/index.html

Selects the given element and shows all test scenarios (succeeded, failed, skipped, mixed) within the active run. It also ensures summary groups are displayed correctly.

```javascript
function showAllScenarios(el) {
 selectedElement(el);
 showElementsWithSelector('.run.active .test-summary.succeeded');
 showElementsWithSelector('.run.active .test-summary.failed');
 showElementsWithSelector('.run.active .test-summary.skipped');
 showElementsWithSelector('.run.active .test-summary.mixed');
 hideSummaryGroupsIfNeeded();
}
```

--------------------------------

### Generate HTML Report from Result Bundle

Source: https://github.com/xctesthtmlreport/xctesthtmlreport/blob/main/README.md

Use the xchtmlreport tool to create an HTML report from a .xcresult bundle. The -i flag can be used to inline all resources for a standalone HTML file.

```bash
$ xchtmlreport TestResults.xcresult

Report successfully created at ./index.html
```

--------------------------------

### Initialize Report UI State

Source: https://github.com/xctesthtmlreport/xctesthtmlreport/blob/main/Sources/XCTestHTMLReportCore/HTML/index.html

Sets the initial selected device and active run in the report UI. This ensures the report is displayed in a default state upon loading.

```javascript
document.querySelectorAll('.device-info')[0].classList.add("selected");
document.querySelectorAll('.run')[0].classList.add("active");
```

--------------------------------

### Generate JUnit Reports

Source: https://github.com/xctesthtmlreport/xctesthtmlreport/blob/main/README.md

Create JUnit-compatible XML reports alongside the HTML report using the -j flag.

```bash
$ xchtmlreport -j TestResults1

Report successfully created at ./index.html

JUnit report successfully created at report.junit
```

--------------------------------

### Generate HTML Report from Multiple Result Bundles

Source: https://github.com/xctesthtmlreport/xctesthtmlreport/blob/main/README.md

Combine multiple result bundles into a single HTML report by listing them as arguments. The -r option can specify the output directory.

```bash
$ xchtmlreport TestResults1 TestResults2

Report successfully created at ./index.html
```

--------------------------------

### Select Device Functionality

Source: https://github.com/xctesthtmlreport/xctesthtmlreport/blob/main/Sources/XCTestHTMLReportCore/HTML/index.html

Handles the selection of a device. It updates the visual 'selected' state for the device information and makes the corresponding run's tests active.

```javascript
function selectDevice(deviceId, el) { while (el && !el.classList.contains('device-info')) { el = el.parentElement; } document.querySelectorAll('.device-info.selected')[0].classList.remove("selected"); el.classList.add("selected"); document.querySelectorAll('.run.active')[0].classList.remove("active"); document.querySelectorAll('#device\_' + deviceId)[0].classList.add("active"); }
```

--------------------------------

### Show Tests View

Source: https://github.com/xctesthtmlreport/xctesthtmlreport/blob/main/Sources/XCTestHTMLReportCore/HTML/index.html

Selects the tests tab, making test elements visible and hiding log elements. Uses flex display for tests and none for logs.

```javascript
function showTests(el) {
 selectedElement(el);
 setDisplayToElementsWithSelector('#logs', 'none');
 setDisplayToElementsWithSelector('.tests', 'flex');
}
```

--------------------------------

### Show Logs View

Source: https://github.com/xctesthtmlreport/xctesthtmlreport/blob/main/Sources/XCTestHTMLReportCore/HTML/index.html

Selects the logs tab, making log elements visible and hiding test elements. Uses flex display for logs and none for tests.

```javascript
function showLogs(el) {
 selectedElement(el);
 setDisplayToElementsWithSelector('#logs', 'flex');
 setDisplayToElementsWithSelector('.tests', 'none');
}
```

--------------------------------

### Show Text Log

Source: https://github.com/xctesthtmlreport/xctesthtmlreport/blob/main/Sources/XCTestHTMLReportCore/HTML/index.html

Displays the log view and sets the iframe source to the specified path. Also hides attachment and screenshot placeholders.

```javascript
function showText(path) {
 hideAttachmentPlaceholder();
 hideScreenshot();
 iframe.style.display = "block";
 iframe.src = path;
}
```

--------------------------------

### Show Elements by Selector

Source: https://github.com/xctesthtmlreport/xctesthtmlreport/blob/main/Sources/XCTestHTMLReportCore/HTML/index.html

Shows all elements that match the provided CSS selector by setting their display style to 'block'.

```javascript
function showElementsWithSelector(sel) {
 setDisplayToElementsWithSelector(sel, 'block');
}
```

--------------------------------

### Run Xcodebuild for UI Tests

Source: https://github.com/xctesthtmlreport/xctesthtmlreport/blob/main/README.md

Execute UI tests using xcodebuild, ensuring the resultBundlePath is specified to capture test results.

```bash
$ xcodebuild test -workspace XCTestHTMLReport.xcworkspace -scheme SampleApp -destination 'platform=iOS Simulator,name=iPhone 14,OS=16.0' -resultBundlePath TestResults
```

--------------------------------

### Show Successful Scenarios Only

Source: https://github.com/xctesthtmlreport/xctesthtmlreport/blob/main/Sources/XCTestHTMLReportCore/HTML/index.html

Selects the given element and shows only successful test scenarios within the active run, hiding others. It also ensures summary groups are displayed correctly.

```javascript
function showSuccessfulScenariosOnly(el) {
 selectedElement(el);
 showElementsWithSelector('.run.active .test-summary.succeeded');
 hideElementsWithSelector('.run.active .test-summary.failed');
 hideElementsWithSelector('.run.active .test-summary.skipped');
 hideElementsWithSelector('.run.active .test-summary.mixed');
 hideSummaryGroupsIfNeeded();
}
```

--------------------------------

### Keyboard Navigation for List Items

Source: https://github.com/xctesthtmlreport/xctesthtmlreport/blob/main/Sources/XCTestHTMLReportCore/HTML/index.html

Implements keyboard controls for navigating through the list of test items. Supports up/down arrow keys for navigation and left/right arrow keys for folding/unfolding items.

```javascript
function keyDown(e) { e = e || window.event; var items = visibleListItems(); if (e.keyCode == 40) { e.preventDefault(); var index = Array.prototype.slice.call(visibleListItems()).indexOf(selectedListItem) + 1; navigateListItems(items.slice(index, items.length)); } else if (e.keyCode == 38) { e.preventDefault(); var index = Array.prototype.slice.call(visibleListItems()).indexOf(selectedListItem) + 1; navigateListItems(items.slice(0, index - 1).reverse()); } else if (e.keyCode == 39) { unfoldCurrentListItem(); } else if (e.keyCode == 37) { foldCurrentListItem(); } }
```

```javascript
document.onkeydown = keyDown;
```

--------------------------------

### Initialize Sidebar Resizers

Source: https://github.com/xctesthtmlreport/xctesthtmlreport/blob/main/Sources/XCTestHTMLReportCore/HTML/index.html

Attaches event listeners to elements with the class 'resizer' to enable sidebar resizing functionality. This is used for adjusting the width of the left and right sidebars.

```javascript
var resizers = document.querySelectorAll('.resizer'), leftSidebar = document.getElementById('left-sidebar'), rightSidebar = document.getElementById('right-sidebar'), sidebar, startX, startWidth, originalWidth, screenshot = document.getElementById('screenshot'), iframe = document.getElementById('text-attachment'); for (var i = 0; i < resizers.length; i++) { resizers[i].addEventListener('mousedown', initDrag, false); }
```

--------------------------------

### Show Failed Scenarios Only

Source: https://github.com/xctesthtmlreport/xctesthtmlreport/blob/main/Sources/XCTestHTMLReportCore/HTML/index.html

Selects the given element and shows only failed test scenarios within the active run, hiding others. It also ensures summary groups are displayed correctly.

```javascript
function showFailedScenariosOnly(el) {
 selectedElement(el);
 hideElementsWithSelector('.run.active .test-summary.succeeded');
 showElementsWithSelector('.run.active .test-summary.failed');
 hideElementsWithSelector('.run.active .test-summary.skipped');
 hideElementsWithSelector('.run.active .test-summary.mixed');
 hideSummaryGroupsIfNeeded();
}
```

--------------------------------

### Show Screenshot

Source: https://github.com/xctesthtmlreport/xctesthtmlreport/blob/main/Sources/XCTestHTMLReportCore/HTML/index.html

Displays a specific screenshot by its filename. Hides attachment placeholders and log views, then sets the screenshot element's source.

```javascript
function showScreenshot(filename) {
 hideAttachmentPlaceholder();
 hideLog();
 var image = document.getElementById('screenshot-'+filename);
 screenshot.style.display = "block";
 screenshot.src = image.src;
}
```

--------------------------------

### Handle List Item Selection

Source: https://github.com/xctesthtmlreport/xctesthtmlreport/blob/main/Sources/XCTestHTMLReportCore/HTML/index.html

Adds event listeners to each list item to handle selection. When a list item is clicked, it becomes the 'selected' item, and its associated attachment (screenshot or text) is displayed.

```javascript
var listItems = document.querySelectorAll('.list-item'); function listItemMouseDown(e) { var item = e.target; while (item && !item.classList.contains('list-item')) { item = item.parentElement; } selectListItem(item); }
```

```javascript
for (var i = 0; i < listItems.length; i++) { listItems[i].addEventListener('mousedown', listItemMouseDown, false); }
```

--------------------------------

### Show Mixed Scenarios Only

Source: https://github.com/xctesthtmlreport/xctesthtmlreport/blob/main/Sources/XCTestHTMLReportCore/HTML/index.html

Selects the given element and shows only mixed test scenarios within the active run, hiding others. It also ensures summary groups are displayed correctly.

```javascript
function showMixedScenariosOnly(el) {
 selectedElement(el);
 hideElementsWithSelector('.run.active .test-summary.succeeded');
 hideElementsWithSelector('.run.active .test-summary.skipped');
 hideElementsWithSelector('.run.active .test-summary.failed');
 showElementsWithSelector('.run.active .test-summary.mixed');
 hideSummaryGroupsIfNeeded();
}
```

--------------------------------

### Show Skipped Scenarios Only

Source: https://github.com/xctesthtmlreport/xctesthtmlreport/blob/main/Sources/XCTestHTMLReportCore/HTML/index.html

Selects the given element and shows only skipped test scenarios within the active run, hiding others. It also ensures summary groups are displayed correctly.

```javascript
function showSkippedScenariosOnly(el) {
 selectedElement(el);
 hideElementsWithSelector('.run.active .test-summary.succeeded');
 hideElementsWithSelector('.run.active .test-summary.failed');
 showElementsWithSelector('.run.active .test-summary.skipped');
 hideElementsWithSelector('.run.active .test-summary.mixed');
 hideSummaryGroupsIfNeeded();
}
```

--------------------------------

### CSS for Test Summary Icons

Source: https://github.com/xctesthtmlreport/xctesthtmlreport/blob/main/Sources/XCTestHTMLReportCore/HTML/index.html

Defines styles for test summary icons, including display properties and margins based on test status and hierarchy.

```css
.test-summary p > .test-icon { display: block; }
.test-summary.no-drop-down .drop-down-icon { display: none; }
.test-summary.no-drop-down .test-icon { margin-left: 22px; }
```

--------------------------------

### Select List Item Logic

Source: https://github.com/xctesthtmlreport/xctesthtmlreport/blob/main/Sources/XCTestHTMLReportCore/HTML/index.html

Manages the visual selection of a list item and determines whether to display a screenshot or text content based on the attachment's file extension. Hides or shows placeholders if no attachment is found.

```javascript
function selectListItem(listItem) { if (selectedListItem) { selectedListItem.classList.remove("selected"); } selectedListItem = listItem; selectedListItem.classList.add("selected"); var firstAttachment = selectedListItem.querySelector('.attachment .preview-icon'); if (firstAttachment == null) { hideScreenshot(); hideLog(); showAttachmentPlaceholder(); return; } var path = firstAttachment.attributes["data"].value; var extension = path.split('.').pop(); var textExtension = ["txt", "crash", "html"]; if (textExtension.indexOf(extension) != -1) { showText(path); } else { showScreenshot(path); } }
```

--------------------------------

### Generate JSON Reports

Source: https://github.com/xctesthtmlreport/xctesthtmlreport/blob/main/README.md

Generate a JSON report of the test results using the --json flag, in addition to the HTML report.

```bash
$ xchtmlreport -json TestResults1

Report successfully created at ./index.html

JSON report successfully created at ./report.json
```

--------------------------------

### Show Attachment Placeholder

Source: https://github.com/xctesthtmlreport/xctesthtmlreport/blob/main/Sources/XCTestHTMLReportCore/HTML/index.html

Makes the attachment placeholder visible in the right sidebar. This is typically shown when no attachments are present.

```javascript
function showAttachmentPlaceholder() {
 var placeholder = document.querySelector("#right-sidebar h2");
 placeholder.style.display = "block";
}
```

--------------------------------

### CSS for Test Result Icons

Source: https://github.com/xctesthtmlreport/xctesthtmlreport/blob/main/Sources/XCTestHTMLReportCore/HTML/index.html

Styles test result icons, controlling their float, display, margin, and background image based on test outcomes like succeeded, skipped, or failed.

```css
.test-result-icon { float: left; display: none; margin: 4px; }
.test-summary.succeeded .test-result-icon, .iteration.succeeded .test-result-icon, .iteration.skipped .test-result-icon, .iteration.failed .test-result-icon { margin-left: 28px; display: block; }
.test-summary.succeeded .test-result-icon, .iteration.succeeded .test-result-icon, .success { background-image: url('data:image/png;base64,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
```

--------------------------------

### Navigate and Scroll List Items

Source: https://github.com/xctesthtmlreport/xctesthtmlreport/blob/main/Sources/XCTestHTMLReportCore/HTML/index.html

Navigates the list of items based on keyboard input and scrolls the view to ensure the selected item is visible. It handles cases where the selected item might be outside the current viewport.

```javascript
function navigateListItems(items) { if (selectedListItem) { for (var i = 0; i < items.length; i++) { var item = items[i]; if (item.offsetParent) { selectListItem(item); var scrollView = document.querySelector('.run.active .tests'); if (!divInsideOfDiv(item, scrollView)) { scrollToItem(item); } return; } } } else { selectListItem(items[0]); } }
```

```javascript
function scrollToItem(item) { var scrollView = document.querySelector('.run.active .tests'), itemBounds = item.getBoundingClientRect(), scrollBounds = scrollView.getBoundingClientRect(); if (itemBounds.bottom > scrollBounds.bottom) { scrollView.scrollBy(0, itemBounds.bottom - scrollBounds.bottom); } else if (itemBounds.top < scrollBounds.top) { scrollView.scrollBy(0, itemBounds.top - scrollBounds.top); } }
```

```javascript
function divInsideOfDiv(divA, divB) { var boundariesA = divA.getBoundingClientRect(); var boundariesB = divB.getBoundingClientRect(); return boundariesA.top >= boundariesB.top && boundariesA.bottom <= boundariesB.bottom; }
```

--------------------------------

### Set Display for Elements by Selector

Source: https://github.com/xctesthtmlreport/xctesthtmlreport/blob/main/Sources/XCTestHTMLReportCore/HTML/index.html

A helper function to set the display style for all elements matching a given CSS selector. It iterates over the NodeList and applies the style.

```javascript
function setDisplayToElementsWithSelector(sel, display) {
 [].forEach.call(document.querySelectorAll(sel), function (el) {
 el.style.display = display;
 });
}
```

--------------------------------

### Select Element and Update UI

Source: https://github.com/xctesthtmlreport/xctesthtmlreport/blob/main/Sources/XCTestHTMLReportCore/HTML/index.html

Marks an element as selected by removing the 'selected' class from its siblings and adding it to itself. Used for navigation.

```javascript
function selectedElement(el) {
 el.parentElement.querySelectorAll('.selected')[0].classList.remove('selected');
 el.classList.add('selected');
}
```

--------------------------------

### Drop-down Icon Styles

Source: https://github.com/xctesthtmlreport/xctesthtmlreport/blob/main/Sources/XCTestHTMLReportCore/HTML/index.html

CSS styles for a drop-down icon, including its default and 'dropped' states. The 'dropped' state modifies the margin and background image.

```css
.drop-down-icon {
  margin-top: 2px;
  background-image: url('data:image/png;base64,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
```

--------------------------------

### Hide Summary Groups If Needed

Source: https://github.com/xctesthtmlreport/xctesthtmlreport/blob/main/Sources/XCTestHTMLReportCore/HTML/index.html

Iterates through test summary groups and hides them if they contain no visible test summaries. This cleans up the UI by removing empty sections.

```javascript
function hideSummaryGroupsIfNeeded() {
 var testSummaryGroups = Array.prototype.slice.call(document.querySelectorAll('.run.active .test-summary-group'));
 for (var i = 0; i < testSummaryGroups.length; i++) {
 var testSummaryGroup = testSummaryGroups[i];
 var children = Array.prototype.slice.call(testSummaryGroup.children);
 var testSummaries = children.filter(function(a) { return a.classList.contains('test-summary'); });
 if (testSummaries.length == 0) {
 continue;
 }
 if (testSummaries.filter(function(a) { return a.style.display == 'block' }).length == 0) {
 testSummaryGroup.style.display = 'none';
 } else {
 testSummaryGroup.style.display = 'block';
 }
 }
}
```

--------------------------------

### Perform Dragging for Sidebar Resizing

Source: https://github.com/xctesthtmlreport/xctesthtmlreport/blob/main/Sources/XCTestHTMLReportCore/HTML/index.html

Updates the width of the sidebar during a drag operation. It calculates the new width based on mouse movement and applies constraints to keep the sidebar within reasonable size limits.

```javascript
function doDrag(e) { var newSidebarWidth, distance = startX - e.clientX; if (sidebar == leftSidebar) { newSidebarWidth = Math.min(Math.max(originalSidebarWidth - distance, 200), 500); } else if (sidebar == rightSidebar) { newSidebarWidth = Math.min(Math.max(originalSidebarWidth + distance, 300), 800); } sidebar.style.width = newSidebarWidth + 'px'; }
```

--------------------------------

### Hide Elements by Selector

Source: https://github.com/xctesthtmlreport/xctesthtmlreport/blob/main/Sources/XCTestHTMLReportCore/HTML/index.html

Hides all elements that match the provided CSS selector by setting their display style to 'none'.

```javascript
function hideElementsWithSelector(sel) {
 setDisplayToElementsWithSelector(sel, 'none');
}
```

--------------------------------

### Toggle Element Visibility

Source: https://github.com/xctesthtmlreport/xctesthtmlreport/blob/main/Sources/XCTestHTMLReportCore/HTML/index.html

Toggles the display of iteration, activity, and attachment sections for a given element ID. Used to expand or collapse test details.

```javascript
function toggle(el, id) {
 el.classList.toggle('dropped');
 var iterations = document.getElementById('iterations-'+id);
 var activities = document.getElementById('activities-'+id);
 var attachments = document.getElementById('attachments-'+id);
 if (iterations) {
 iterations.style.display = (iterations.style.display == 'block' ? 'none' : 'block');
 }
 if (activities) {
 activities.style.display = (activities.style.display == 'block' ? 'none' : 'block');
 }
 if (attachments) {
 attachments.style.display = (attachments.style.display == 'block' ? 'none' : 'block');
 }
}
```

--------------------------------

### Unfold Current List Item

Source: https://github.com/xctesthtmlreport/xctesthtmlreport/blob/main/Sources/XCTestHTMLReportCore/HTML/index.html

Expands a currently selected list item if its dropdown icon does not indicate it is 'dropped' (expanded). This is triggered by the right arrow key.

```javascript
function unfoldCurrentListItem() { var dropIcon = selectedListItem.querySelector('.drop-down-icon'); if (dropIcon == null) { return; } if (!dropIcon.classList.contains("dropped")) { selectedListItem.querySelector('.drop-down-icon').onclick(); } }
```

--------------------------------

### Fold Current List Item

Source: https://github.com/xctesthtmlreport/xctesthtmlreport/blob/main/Sources/XCTestHTMLReportCore/HTML/index.html

Collapses a currently selected list item if its dropdown icon indicates it is 'dropped' (expanded). This is triggered by the left arrow key.

```javascript
function foldCurrentListItem() { var dropIcon = selectedListItem.querySelector('.drop-down-icon'); if (dropIcon == null) { return; } if (dropIcon.classList.contains("dropped")) { selectedListItem.querySelector('.drop-down-icon').onclick(); } }
```

--------------------------------

### Hide Attachment Placeholder

Source: https://github.com/xctesthtmlreport/xctesthtmlreport/blob/main/Sources/XCTestHTMLReportCore/HTML/index.html

Hides the attachment placeholder in the right sidebar. This is used when an attachment is being displayed.

```javascript
function hideAttachmentPlaceholder() {
 var placeholder = document.querySelector("#right-sidebar h2");
 placeholder.style.display = "none";
}
```

--------------------------------

### Hide Screenshot View

Source: https://github.com/xctesthtmlreport/xctesthtmlreport/blob/main/Sources/XCTestHTMLReportCore/HTML/index.html

Hides the screenshot display element. This is called when switching to other views like logs.

```javascript
function hideScreenshot() {
 screenshot.style.display = "none";
}
```

--------------------------------

### Hide Log View

Source: https://github.com/xctesthtmlreport/xctesthtmlreport/blob/main/Sources/XCTestHTMLReportCore/HTML/index.html

Hides the iframe element used for displaying logs. This is called when switching to other views like screenshots.

```javascript
function hideLog() {
 iframe.style.display = "none";
}
```

--------------------------------

### Stop Dragging for Sidebar Resizing

Source: https://github.com/xctesthtmlreport/xctesthtmlreport/blob/main/Sources/XCTestHTMLReportCore/HTML/index.html

Cleans up event listeners after the drag operation for sidebar resizing has ended. It also removes the 'dragging' class from the body.

```javascript
function stopDrag(e) { document.documentElem
```
Tokens:
Raw