See https://github.com/aside-ufba/guide-automator for further development
Automated User Guide Generation with Markdown
- Nodejs && npm (Compiler)
- ImageMagick (Needed for cropping images)
- Wkhtmltopdf (Needed for converting html to pdf)
- Chrome and Chrome WebDriver (Selenium Web Browser automation)
-
(Option 1)You can install with script
sudo wget -qO- https://raw.githubusercontent.com/welbert/guide-automator/master/install_linux.sh | bash -
-
(Option 2) Manual installation. You need install some binary dependencies.
https://nodejs.org/en/download/package-manager/#debian-and-ubuntu-based-linux-distributions2.ImageMagick (Usually is already installed):
https://www.imagemagick.org/script/binary-releases.php#unixhttp://wkhtmltopdf.org/downloads.html4.Chrome/Chromium Browser
-Chrome: https://www.google.com/chrome/browser/desktop/index.html -Chromium: sudo apt-get install chromium-browserhttps://chromedriver.storage.googleapis.com/index.html?path=2.25/sudo npm install -g guide-automator
Node, wkhtmltopdf and Chrome WebDriver need to be add in path.
https://nodejs.org/en/download/
2.ImageMagick: (Check to install legacy utilities)
https://www.imagemagick.org/script/binary-releases.php#windows
http://wkhtmltopdf.org/downloads.html
4.Chrome
-Chrome:
https://www.google.com/chrome/browser/desktop/index.html
https://chromedriver.storage.googleapis.com/index.html?path=2.25/
npm install -g guide-automator
Node, ImageMagick(convert.exe), Wkhtmltopdf and Chrome WebDriver need to be add in path.
Guide-automator extract javascript tags (```javascript guide-automator commands ```) from markdown file and generate manual from them. You need use our API commands in markdown file.
# This is my github
```javascript
get('https://github.com/welbert');
takeScreenshot();
takeScreenshotOf('.avatar',false,true);
```(<- three back-ticks)
More examples with comments here or see raw, if you want to look the output pdf (This pdf was created using command '$ guide-automator -i examples/example.md -o output/ -s lightBlue')
You will need know how to extract css selector of Web elements, you can use the browser to do that. If you dont know how to do this, see below.
- Google Chrome
- Mozilla Firefox
After this steps, the css selector will be copied to your clipboard
You can use the firefox addon to make easy the construction of blocks
$ guide-automator -h
Usage: guide-automator [options]
Options:
-h, --help output usage information
-V, --version output the version number
-i, --input <File.md> Input .md file
-o, --output <Folder> Output destination folder
-P, --pdf Export manual to PDF, default is export for all types
-H, --html Export manual to HTML, default is export for all types
-I, --image Export ONLY manual's image and ignore others types, default is export for all types
-s, --style <style.css> Css style to be used in the manual or theme [lightBlue,lightOrange]
-d, --debug Show progress of code
Examples:
$ guide-automator -i input.md -o output/
$ guide-automator -i input.md
$ guide-automator -i input.md -o output/ -s lightBlue
Params: <Required> [Optional]
- get
- click
- clickByLinkText
- takeScreenshot
- takeScreenshotOf
- fillIn
- submit
- wait
- sleep
- console.print
- pageContext
- Description: Url to access
- Params:
<url> - Example:
- get('https://github.com/welbert');
- Description: Click on element
- Params:
<cssSelector> - Example:
- click('.unstarred > button:nth-child(2)');
- Description: Click on link text(<a>)
- Params:
<linkText> - Example:
- clickByLinkText('README.md');
- Description: Take Screenshot
- Params:
[imageWidth] - Example:
- takeScreenshot();
- takeScreenshot('10%');
- Description: Take Screenshot of specific element
- Params:
<cssSelector>,[crop],[outline],[imageWidth] - Params:
Array(<cssSelector>,[cssSelector],...),[crop],[outline],[imageWidth] - Params:
Array(Array(<cssSelector>,<Iframe-CssSelector>),[cssSelector],...),[crop],[outline],[imageWidth] - Example:
- takeScreenshotOf('#user-content-guideautomator');
- takeScreenshotOf('#user-content-guideautomator',false,true);
- takeScreenshotOf(['#user-content-guideautomator','.avatar'],false,true); //Multiple cssSelector(only for outline)
- takeScreenshotOf([['#user-content-guideautomator','#frameID'],'.avatar'],false,true) //Multiple cssSelector (only for outline) on different contexts(Iframe)
- Description: Fill in field element
- Params:
<cssSelector>,<input> - Example:
- fillIn('.header-search-input','guide-automator');
- Description: Submit a form
- Params:
<cssSelector> - Example:
- submit('.js-site-search-form');
- Description: Wait element load on page
- Params:
<cssSelector>,[timeOut] - Example:
- wait('.commit-author-section');
- wait('.commit-author-section',2000);
- Description: Sleep for a while
- Params:
<milleseconds> - Example:
- sleep(1000);
- Description: Print text on markdown file using javascript blocks
- Params:
<text> - Example:
- console.print('# Title');
- Description: Need to change context to iframe or context default(Main page)
- Params:
[cssSelector] - Example:
- pageContext('#Iframe-CssSelector');
- pageContext('default'); //Equivalent to pageContext();
- pageContext();
This topic is for more complex cases or personal needs that guide-automator does not support
Example:
GD.driver.actions().
mouseMove({x:216, y:41}).
click().
perform();
See raw