blob: 7667cdb37c50411887a64918fbb36b91d0fed6cb [file]
<!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 &ndash; 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">&#x200b;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">&#x200b;get-object | save-screenshot &quot;/path/to/screenshot.png&quot;</code> snippets in interesting parts. Here <code class="language-ecl">&#x200b;get-object</code> takes an SWT object from RCPTT selector command (since we are in <code class="language-ecl">&#x200b;with</code> block, we are taking an SWT object from a window here), and <code class="language-ecl">&#x200b;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">&#x200b;get-object | save-screenshot</code>:</p>
<pre ><code class="language-ecl">&#x200b;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">&#x200b;
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">&#x200b;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 &#8230;
find-tab-folder "Outline" | get-object | save-screenshot &#8230;
</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">&#x200b;// 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 &ndash; 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">&#x200b;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>