Releases: gemini-testing/html-reporter
v11.6.0
This release contains features that may be useful for plugin developers.
🚀 Features
- Added
CollapsibleSectioncomponent to Plugins SDK. Use this component in your plugins to match the visual style of collapsible sections found on the test result page (e.g. Actions or Metadata). This component also remembers user preferences (collapsed/expanded) and applies them when switching tests. - Added
result_metaextension point to New UI. This lets you embed your components right on the test result page.
v11.5.0 — New short urls!
🚀 Features
New url format
Previously, we had URLs on the suites page like this:
suites/${testId}/${state}/${attempt}
And on the screenshots page like this:
visual-checks/${imageId}/${attempt}
Now we have a common format for both pages. We also changed the test name to a hash of the test name:
${suites | visual-checks}/${hash}/${browser}/${attempt}/${state}
Example of the new URL:
http://localhost:8000/new-ui#/suites/26f8dee/chrome/0/main
Before it was:
http://localhost:8000/new-ui#/suites/badges%20badge%20example%203%20chrome/main/0
Note
This mode is only available in New UI
v11.4.0
🚀 Features
Custom badges for tests
Now you can set custom badges for every test. Each badge can have a title, link, and icon. See the screenshot for an example and read the documentation to implement it in your project.
Note
This mode is only available in New UI
v11.3.0 — An all-new interactive diff viewer!
This release contains a new diff viewer, built from ground up, that lets you work with visual checks like never before!
🚀 Features
Interactive Diff Viewer
The new diff viewer allows you to zoom in, pan and interact with screenshots in a synced split view. Here's what it looks like when you first open it up:
Note
This mode is only available in New UI and only on Visual Checks tab.
Glide across and inspect visual changes with fluid and beautifully smooth animations:
2up.mp4
There's also this neat toolbar that appears as soon as you point at an image. You can download, zoom in/out, reset the zoom and fit image to width using these buttons:
We're planning even more exciting updates to this diff viewer, like tools to help you find tiny diffs and more polished experience when viewing successful visual checks — stay tuned!
Hope you’ll enjoy using the new Diff Viewer as much as we enjoyed building it. Happy diffing!
v11.2.1
v11.2.0 — Improvements for plugins developers
🚀 Features
Plugins SDK
More dependencies are now available for use in reporter plugins — including @gravity-ui/uikit and all-new repoter plugins SDK.
what you can do with Plugins SDK
On Node side, you may import typings and constants (with more to come in the future).
Right now, you may import a enum, containing all possible extension point names (places where you can embed your plugin):
// Useful for exporting ready-to-use plugin presets
import {ExtensionPointName} from 'html-reporter/plugins-sdk';
export = {
name: "my-plugin/ui",
component: "Plugin",
point: ExtensionPointName.SettingsPanel,
position: "after",
};Another thing you can do with Plugins SDK is to import plugin options type, which looks like this:
interface PluginOptions {
pluginServerEndpointPrefix: string;
}You can use it in your plugin UI to determine the correct endpoint where your plugin server side is exposing endpoints, like this:
// pluginOptions are injected in your UI by html-reporter
// @see https://github.com/gemini-testing/html-reporter/blob/b100027bb165377789fcbaa05954c6127788ddc7/lib/static/modules/load-plugin.js#L105
const endpoint = pluginOptions.pluginServerEndpointPrefix.replace(/\/$/, "") + "/items";
const responseFromPluginBackend = await fetch(endpoint);There's also ready-to-use UI components in Plugins SDK that match HTML Reporter visuals perfectly.
For now, there's PanelSection component that lets you build additional settings that looks like this:
And may be used like this:
import {} from 'html-reporter/plugins-sdk/ui';
export function Plugin() {
return <PanelSection title='My Plugin Settings' description={'Change plugin settings in this section'}>
{/* You may use any controls, like Select or TextInput here */}
</PanelSection>;
}You may learn more about what's available on UI side here: https://github.com/gemini-testing/html-reporter/blob/b100027bb165377789fcbaa05954c6127788ddc7/lib/static/modules/plugins-sdk-ui.ts.
Besides components, redux store typings and Feature types are exported. Important note: only typings are actually exported from the html-reporter/plugins-sdk/ui, not components themselves. The components themselves are injected here and should be supplied by your bundler.
Stay tuned for additional docs on how to build plugins for HTML Reporter ✨
