A screenshot & markdown generator
Installing
- npm install -g testcafe
- npm install -g docsify-cli
- npm install --save-dev auto-docs
In you package.json
"scripts":
To generate with screenshots npm run manual
also
To run without brower commands use npm run files
Once generated.
To run document server npm run serve
How you can open localhost:3000
Api
brower commands
- navigateTo: go to a given url - (url)
- typeText: enter text into an input - (selecter,text)
- click: click on an element - (selecter)
document commands
- description: Add basic text to document - (text)
- screenshot: Capture the screen and add to document - (screenshot_name,[diff]) diff defult to
true
check if the screen has chacked - link: Add a link to document (title,url)
- img: Add a image to document (title,url)
- lang: apply translation from ##.json
lang`message`
- Injects new text into language json file if new/missing
- generating of language json file if missing
- With value passion recording. Used in language like Arabic, Chinese, Hindi, Japanese etc..
- code: Add a block of code to document (source,[type]) type of optional
- pageBreak: Add a link break to document () ~ No arguments
- title: Add a heading to document (text) or (level,text) to set the depth of the sub heading
- youtube: A thumbnail link to a video (video_id,[start from X sec]) start of optional
- You will need a "playbutton.png" in your "pics" folder
- You will also need the CSS to place the button
CSS: youtube button placement
Add this CSS
<style>
p{
position: relative;
}
img[alt='videobutton']{
pointer-events: none;
position: absolute;
z-index: 3;
top: calc( 50% - 50px);
left: calc( 50% - 50px);
width: 100px;
}
</style>
JS: embed youtube video
Add this index.html
window.$docsify = { plugins: [ function (hook, vm) { hook.afterEach(function(html, next) { if(html.includes("youtube")){ $(html).find("img[src*='youtube']").parent().toArray() .map(elem => $(elem)) .forEach( elemA =>{ const link = elemA.attr("href") const [id ,time] = link.split("/").pop().split("?") const start = time ? time.match(/\d+/)[0] : 0 const elemToReplace = elemA.parent().html().replace(new RegExp(" data-origin=", "g"),"data-origin=") const newElem = `<iframe width="100%" height="433" src="https://www.youtube.com/embed/${id}?start=${start}" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>` html = html.replace(elemToReplace,newElem) } ) } next(html) }) } ] // ... }
Config file
From with the manual folder you should place a config.json file
Example:
- server: the path to your server
- only: An array of file steps to the page you want to regenerate optional!
- waitBeforeScreenShot: how long to wite for taking a ScreenShot optional! (Default: 0)
- login: login credentials to use