histoire-dev / histoire-dev/histoire

plugin-screenshot | a way to pass options to `capture-website`

Open
#357 1 comment 0 reactions 0 assignees View on GitHub
enhancement: to triage
Dominant language
TypeScript
Stars
3.6k
Forks
212
PR merge metrics
No merged PRs in 30d

Description

### Clear and concise description of the problem

`capture-website` takes screenshots before resource files are getting loaded. I believe this is just a matter of a couple of hundred milliseconds.

### Suggested solution

We can have additional properties like:
```ts
interface ScreenshotPluginOptions {
// ...
/**
* The number of seconds to wait after the page finished loading before
* capturing the screenshot. This can be useful if you know the page has
* animations that you like it to finish before capturing the screenshot.
* @default 0
*/
delay?: number;
/**
* Wait for a DOM element matching the given
* [CSS selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors)
* to appear in the page and to be visible before capturing the screenshot.
* It times out after `options.timeout` seconds.
*
* @default '.histoire-generic-render-story'
*/
waitForElement?: string;
}
```

### Alternative

_No response_

### Additional context

Notice that plugin should also pass a selector, something like this to guaranteeing the results
![image](https://user-images.githubusercontent.com/5789670/201763650-855cda94-9c91-4d39-a3a7-f0c9c811ed76.png)

### Validations

- [X] Follow our [Code of Conduct](https://github.com/histoire-dev/histoire/blob/main/CODE_OF_CONDUCT.md)
- [X] Read the [Contributing Guidelines](https://github.com/histoire-dev/histoire/blob/main/CONTRIBUTING.md).
- [X] Read the [docs](https://histoire.dev/guide/).
- [X] Check that there isn't [already an issue](https://github.com/histoire-dev/histoire/issues) that requests the same feature to avoid creating a duplicate.

Contributor guide

Open the contributing guide

Research direction

Locate the screenshot plugin entry point and the call to capture-website, then inspect how its current options are passed. Done means supporting the proposed delay and waitForElement behavior, including the stated defaults and timeout, with coverage for the new options.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.