histoire-dev / histoire-dev/histoire
plugin-screenshot | a way to pass options to `capture-website`
- 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

### 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
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