| <!DOCTYPE html> |
| <head> |
| <title>RCPTT Blog</title> |
| <meta charset="UTF-8"> |
| <link rel="stylesheet" href="https://www.eclipse.org/rcptt/shared/css/bootstrap.min.css"> |
| <link rel="stylesheet" href="https://www.eclipse.org/rcptt/shared/css/main.css"> |
| <link rel="stylesheet" href="https://www.eclipse.org/rcptt/shared/css/prism.css"> |
| <link rel="icon" href="https://www.eclipse.org/rcptt/shared/img/favicon.ico"> |
| <link rel="alternate" type="application/atom+xml" href="https://www.eclipse.org/rcptt/blog/atom.xml" title="RCP Testing Tool Blog"/> |
| <script src="https://www.eclipse.org/rcptt/shared/js/jquery.min.js"></script> |
| <script src="https://www.eclipse.org/rcptt/shared/js/bootstrap.min.js"></script> |
| <script src="https://www.eclipse.org/rcptt/shared/js/prism.js"></script> |
| <script src="https://www.eclipse.org/rcptt/shared/js/ecl.js"></script> |
| <script> |
| (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ |
| (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), |
| m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) |
| })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); |
| |
| ga('create', 'UA-39589807-5', 'eclipse.org'); |
| ga('send', 'pageview'); |
| </script> |
| </head> |
| <body> |
| <div id="before-footer"> |
| <header> |
| <nav class="navbar navbar-default navbar-static-top" role="navigation"> |
| <div class="container"> |
| |
| <div class="navbar-header"> |
| <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> |
| <span class="sr-only">Toggle navigation</span> |
| <span class="icon-bar"></span> |
| <span class="icon-bar"></span> |
| <span class="icon-bar"></span> |
| </button> |
| <a href="https://www.eclipse.org/rcptt/blog"><span class="navbar-brand">RCPTT Blog</span></a> |
| </div> |
| <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> |
| <ul class="nav navbar-nav"> |
| <li > |
| <a href="https://www.eclipse.org/rcptt/blog/">Latest Entries</a> |
| </li> |
| <li > |
| <a href="https://www.eclipse.org/rcptt/blog/categories">Categories</a> |
| </li> |
| <li > |
| <a href="https://www.eclipse.org/rcptt/blog/tags">Tags</a> |
| </li> |
| <li> |
| <a href="http://eclipse.org/rcptt">Back to RCPTT Main Site</a> |
| </li> |
| <li> |
| <a href="http://eclipse.org">Eclipse.org</a> |
| </li> |
| </ul> |
| </div> |
| </nav> |
| </header> |
| <section class="content"> |
| <div class="container"> |
| <article> |
| <header> |
| <h2>Screenshots for documentation</h2> |
| <small>Nov, 21, 2014 by Ivan Inozemtsev</small> </header> |
| <div> |
| |
| <p> |
| This year on EclipseCon Europe Jeremie Bresson pointed me to a <a href="http://model-driven-blogging.blogspot.ru/2009/03/shuangxi-effect-ui-testing-and.html">nice Cédric Brun's article</a> on how to use SWTBot to generate screenshots for documentation, and asked whether something like this is possible with RCPTT. |
| </p> |
| |
| <p> |
| And the answer is – yes, indeed! Actually, I never thought about this use-case before, but we have a <a href="http://download.eclipse.org/rcptt/release/1.5.4/doc/ecl/index.html#save-screenshot">save-screenshot</a> command, which can save a screenshot of a control into a file. So, here's how to save screenshots for new plugin project wizard: |
| </p> |
| |
| |
| <pre data-line="5,10,14,20"><code class="language-ecl">​get-view "Package Explorer" | get-tree | get-menu "New/Plug-in Project" | click |
| |
| with [get-window "New Plug-in Project"] { |
| get-editbox -after [get-label "Project name:"] | set-text "org.sample.view" |
| get-object | save-screenshot "/tmp/tmp/demo/first-page.png" |
| get-button "Next >" | click |
| |
| get-group Properties | get-editbox -after [get-label "Name:"] |
| | set-text "Sample View Plugin" |
| get-object | save-screenshot "/tmp/tmp/demo/second-page.png" |
| get-button "Next >" | click |
| |
| get-table | select "Plug-in with a view" |
| get-object | save-screenshot "/tmp/tmp/demo/third-page.png" |
| get-button "Next >" | click |
| } |
| |
| with [get-window "New plug-in project with a sample view"] { |
| get-button "Tree viewer" | click |
| get-object | save-screenshot "/tmp/tmp/demo/fourth-page.png" |
| get-button Finish | click |
| } |
| </code></pre> |
| |
| |
| <p> |
| This is just a recorded test case with manual insertion of <code class="language-ecl">​get-object | save-screenshot "/path/to/screenshot.png"</code> snippets in interesting parts. Here <code class="language-ecl">​get-object</code> takes an SWT object from RCPTT selector command (since we are in <code class="language-ecl">​with</code> block, we are taking an SWT object from a window here), and <code class="language-ecl">​save-screenshot</code> takes bounds of given control and saves a screenshot to given path. Here are the images, saved as an execution result of the script above: |
| </p> |
| <!-- break --> |
| |
| <br/> |
| <div class="row"> |
| <div class="col-md-3"> |
| <a href="https://www.eclipse.org/rcptt/shared/img/blog/shots/1-page.png"><img width="200" src="https://www.eclipse.org/rcptt/shared/img/blog/shots/1-page.png" /></a> |
| </div> |
| <div class="col-md-3"> |
| <a href="https://www.eclipse.org/rcptt/shared/img/blog/shots/2-page.png"><img width="200" src="https://www.eclipse.org/rcptt/shared/img/blog/shots/2-page.png" /></a> |
| </div> |
| <div class="col-md-3"> |
| <a href="https://www.eclipse.org/rcptt/shared/img/blog/shots/3-page.png"><img width="200" src="https://www.eclipse.org/rcptt/shared/img/blog/shots/3-page.png" /></a> |
| </div> |
| <div class="col-md-3"> |
| <a href="https://www.eclipse.org/rcptt/shared/img/blog/shots/4-page.png"><img width="200" src="https://www.eclipse.org/rcptt/shared/img/blog/shots/4-page.png" /></a> |
| </div> |
| </div> |
| |
| |
| <br/> |
| <p>Note that RCPTT automatically brings an application-under-test in front before taking a screenshot, to make sure that everything is visible.</p> |
| |
| <h3>Individual controls</h3> |
| <p>But what if I want to take a screenshot of a tree, or toolbar, or editor? That's also possible, we just need to use another input for <code class="language-ecl">​get-object | save-screenshot</code>:</p> |
| |
| |
| <pre ><code class="language-ecl">​get-button "New.*" | get-object | save-screenshot ... |
| get-editor "SampleView.java" | get-text-viewer | get-object | save-screenshot ... |
| get-view Outline | get-tree | get-object | save-screenshot ... |
| </code></pre> |
| |
| |
| |
| <div class="row"> |
| <div class="col-md-4"> |
| <a href="https://www.eclipse.org/rcptt/shared/img/blog/shots/toolbarButton.png"><img src="https://www.eclipse.org/rcptt/shared/img/blog/shots/toolbarButton.png" /></a> |
| </div> |
| |
| <div class="col-md-4"> |
| <a href="https://www.eclipse.org/rcptt/shared/img/blog/shots/editor.png"><img width="300" src="https://www.eclipse.org/rcptt/shared/img/blog/shots/editor.png" /></a> |
| </div> |
| |
| <div class="col-md-4"> |
| <a href="https://www.eclipse.org/rcptt/shared/img/blog/shots/tree.png"><img width="200" src="https://www.eclipse.org/rcptt/shared/img/blog/shots/tree.png" /></a> |
| </div> |
| </div> |
| <br/> |
| <p>By using <a href="http://download.eclipse.org/rcptt/release/1.5.4/doc/ecl/index.html#invoke">invoke</a> command to call SWT's <code>Control.getParent()</code> method, it is possible to get a screenshot of a part of a toolbar, or the whole toolbar:</p> |
| <pre ><code class="language-ecl">​ |
| get-button "Save All.*" | get-object | invoke getParent | save-screenshot ... |
| |
| get-button "Save All.*" | get-object |
| | invoke getParent |
| | invoke getParent |
| | invoke getParent |
| | save-screenshot ... |
| </code></pre> |
| |
| |
| <div class="row"> |
| <div class="col-md-6"> |
| <a href="https://www.eclipse.org/rcptt/shared/img/blog/shots/toolbar.png"><img style="max-width:100%" src="https://www.eclipse.org/rcptt/shared/img/blog/shots/toolbar.png" /></a> |
| </div> |
| |
| <div class="col-md-6"> |
| <a href="https://www.eclipse.org/rcptt/shared/img/blog/shots/toolbarAll.png"><img style="max-width:100%" src="https://www.eclipse.org/rcptt/shared/img/blog/shots/toolbarAll.png" /></a> |
| </div> |
| </div> |
| |
| <h3>View and editor parts</h3> |
| <p>Screenshots of a Java Editor and a tree in Outline view above don't look very realistic -- they don't include a name of View/Editor. In order to include it, ideally we should take bounds of a tab folder, associated with view or editor stack. RCPTT does not have built-in commands to find a tab folder by view/editor (as there is no practical need for that). However, it is possible to write a handy procedure to iterate through all tab folders in an application and find the one with an active tab we need:</p> |
| |
| |
| <pre ><code class="language-ecl">​proc "find-tab-folder" [val activePage] { |
| loop [val index [int 0]] { |
| let [val folder [get-tab-folder -index $index]] { |
| let [val folderActivePage [$folder | get-property activePage -raw]] { |
| if [$folderActivePage | eq $activePage] { |
| $folder //returning result |
| } -else { recur [$index | plus 1] } |
| } |
| } |
| } |
| } |
| |
| find-tab-folder "SampleView.java" | get-object | save-screenshot … |
| find-tab-folder "Outline" | get-object | save-screenshot … |
| </code></pre> |
| |
| |
| <br/> |
| <p>And here's a result:</p> |
| <div class="row"> |
| <div class="col-md-6"> |
| <a href="https://www.eclipse.org/rcptt/shared/img/blog/shots/editorPart.png"><img src="https://www.eclipse.org/rcptt/shared/img/blog/shots/editorPart.png"/></a> |
| </div> |
| <div class="col-md-6"> |
| <a href="https://www.eclipse.org/rcptt/shared/img/blog/shots/treePart.png"><img src="https://www.eclipse.org/rcptt/shared/img/blog/shots/treePart.png"/></a> |
| </div> |
| </div> |
| |
| <h3>Reproducible screenshot sizes</h3> |
| |
| <p>For a real-life usage, it's highly important to ensure that screenshot sizes are always the same. For dialogs, this can be done like this:</p> |
| <pre ><code class="language-ecl">​// calling Shell.setSize(x, y) via reflection: |
| get-window "New Plug-in Project" | get-object | invoke setSize 400 600 |
| </code></pre> |
| |
| |
| <p>For the size of view and edit parts thigs are trickier – there's no way to affect it directly, but at least it is possible to get reproducible sizes by setting the size of main workbench window and then resetting a perspective:</p> |
| |
| |
| <pre ><code class="language-ecl">​get-eclipse-window | get-object | invoke setSize 900 600 |
| get-menu "Window/Reset Perspective..." | click |
| </code></pre> |
| |
| |
| That way, it is possible to automatically generate screenshots of the for different versions of an application on different operating systems. |
| |
| <h3>What's next?</h3> |
| |
| To try this at home, follow these steps: |
| <ul> |
| <li><a href="https://www.eclipse.org/rcptt/shared/img/blog/shots/screenshots.zip">download</a> a sample project</li> |
| <li>Import it as an existing project into RCPTT IDE (until 1.5.4 is out, because of issue <a href="https://bugs.eclipse.org/bugs/show_bug.cgi?id=450277">#450277</a> it is better to use nightly build from <a href="http://eclipse.org/rcptt/download">download page</a>)</li> |
| <li>Use any Eclipse package which includes PDE tools as an AUT</li> |
| <li>Launch tests from attached project</li> |
| <li>Go to your home folder and examine Documents/rcptt-screenshots folder |
| </ul> |
| </div> |
| <p class="categories"> |
| Categories: |
| <a href="https://www.eclipse.org/rcptt/blog/categories/howtos">howtos</a> </p> |
| |
| <nav class="article"> |
| <ul> |
| <li>Next: <a class="next" href="https://www.eclipse.org/rcptt/blog/2014/12/10/test-about-dialog.html" title="Testing About Dialog"><span class="title">Testing About Dialog</span></a></li> |
| <li>Previous: <a class="previous" href="https://www.eclipse.org/rcptt/blog/2014/11/11/rcptt-blog-launched.html" title="RCPTT Blog launched"><span class="title">RCPTT Blog launched</span></a></li> |
| </ul> |
| </nav> |
| |
| <p><a href="https://www.eclipse.org/forums/index.php/t/864982/">Discuss</a> this article on forum.</p> |
| </article> |
| </div> |
| |
| </section> |
| <script src="https://www.eclipse.org/rcptt/shared/js/main.js"></script> |
| </body> |