forked from open-rpa/docs
-
Notifications
You must be signed in to change notification settings - Fork 0
/
3.6._recorder_and_selectors.html
384 lines (276 loc) · 33.2 KB
/
3.6._recorder_and_selectors.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
<!DOCTYPE html>
<!--[if IE 8]><html class="no-js lt-ie9" lang="en" > <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en" > <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Recorder and Selectors — BPA/OpenIAP Docs 1.0.5 documentation</title>
<script type="text/javascript" src="static/js/modernizr.min.js"></script>
<script type="text/javascript" id="documentation_options" data-url_root="./" src="static/documentation_options.js"></script>
<script src="static/jquery.js"></script>
<script src="static/underscore.js"></script>
<script src="static/doctools.js"></script>
<script src="static/language_data.js"></script>
<script type="text/javascript" src="static/js/theme.js"></script>
<link rel="stylesheet" href="static/css/theme.css" type="text/css" />
<link rel="stylesheet" href="static/pygments.css" type="text/css" />
<link rel="stylesheet" href="static/styles.css" type="text/css" />
<link rel="index" title="Index" href="genindex.html" />
<link rel="search" title="Search" href="search.html" />
</head>
<body class="wy-body-for-nav">
<div class="wy-grid-for-nav">
<nav data-toggle="wy-nav-shift" class="wy-nav-side">
<div class="wy-side-scroll">
<div class="wy-side-nav-search" >
<a href="index.html" class="icon icon-home"> BPA/OpenIAP Docs
</a>
<div role="search">
<form id="rtd-search-form" class="wy-form" action="search.html" method="get">
<input type="text" name="q" placeholder="Search docs" />
<input type="hidden" name="check_keywords" value="yes" />
<input type="hidden" name="area" value="default" />
</form>
</div>
</div>
<div class="wy-menu wy-menu-vertical" data-spy="affix" role="navigation" aria-label="main navigation">
<ul>
<li class="toctree-l1"><a class="reference internal" href="rpa.html">1. <strong>Introduction to RPA</strong></a></li>
<li class="toctree-l1"><a class="reference internal" href="openflow.html">2. <strong>OpenFlow</strong></a></li>
<li class="toctree-l1"><a class="reference internal" href="openrpa.html">3. <strong>OpenRPA</strong></a></li>
<li class="toctree-l1"><a class="reference internal" href="node_red.html">4. <strong>Node-RED</strong></a></li>
<li class="toctree-l1"><a class="reference internal" href="appendix_a.html">5. <strong>Appendix A</strong></a></li>
<li class="toctree-l1"><a class="reference internal" href="appendix_b.html">6. <strong>Appendix B</strong></a></li>
</ul>
<ul>
<li class="toctree-l1"><a class="reference internal" href="license.html">1. License</a></li>
</ul>
</div>
</div>
</nav>
<section data-toggle="wy-nav-shift" class="wy-nav-content-wrap">
<nav class="wy-nav-top" aria-label="top navigation">
<i data-toggle="wy-nav-top" class="fa fa-bars"></i>
<a href="index.html">BPA/OpenIAP Docs</a>
</nav>
<div class="wy-nav-content">
<div class="rst-content">
<div role="navigation" aria-label="breadcrumbs navigation">
<ul class="wy-breadcrumbs">
<li><a href="index.html">Docs</a> »</li>
<li><strong>Recorder and Selectors</strong></li>
<li class="wy-breadcrumbs-aside">
</li>
</ul>
<hr/>
</div>
<div role="main" class="document" itemscope="itemscope" itemtype="http://schema.org/Article">
<div itemprop="articleBody">
<div class="section" id="recorder-and-selectors">
<h1><strong>Recorder and Selectors</strong><a class="headerlink" href="#recorder-and-selectors" title="Permalink to this headline">¶</a></h1>
<p>Recording is the recommended method to create Workflows inside <strong>OpenRPA</strong>. Instead of endlessly dragging activities into the Designer, it is preferable that the user records the steps by using the <strong>Recorder</strong>.</p>
<p>Using the <strong>Recorder</strong> is very easy, all the user has to do is click the <strong>Recorder</strong> button and do the task which will be automated. If during the recording the user finds interesting to fill, lets say, an input field with some specific variable content, the user may use a dummy text and, after closing the <strong>Recorder</strong>, change these dummy texts to variables by using the Assign activity.</p>
<p><strong>Selectors</strong> go hand in hand with the <strong>Recorder</strong>. The <strong>Recorder</strong> basically builds a <strong>Selector</strong> for the user, given what is clicked. Selector is set of criteria and, with it, <strong>OpenRPA</strong> is expected to be able to find an element, unambiguously.</p>
<p>Notice that the user is free to create a <strong>Selectors</strong> from scratch, although it is <strong>NOT</strong> recommended (it is not only it is harder but also prone to errors and typos).</p>
<div class="figure align-center">
<img alt="images/openrpa_recorder_what_is_selector.png" src="images/openrpa_recorder_what_is_selector.png" />
</div>
<p>A thorough example showing how to automate using the <strong>Recorder</strong> is shown in the <a class="reference internal" href="openrpa.html#windows-automation"><span class="std std-ref">Windows Automation</span></a> section.</p>
<p><strong>OpenRPA</strong> allows for some configuration related to the <strong>Recorder</strong> to be customized, such as to highlight elements while the recording is happening or to change how the <strong>Recorder</strong> add activities to the Designer. See more at <a class="reference internal" href="openrpa.html#parameters"><span class="std std-ref">Parameters</span></a>, specially <code class="docutils literal notranslate"><span class="pre">recording_add_to_designer</span></code> and <code class="docutils literal notranslate"><span class="pre">record_overlay</span></code>.</p>
<div class="section" id="difference-between-technologies-nm-sap-windows">
<h2>Difference between technologies (NM, SAP, Windows, …)<a class="headerlink" href="#difference-between-technologies-nm-sap-windows" title="Permalink to this headline">¶</a></h2>
<p>At first, when clicking any element during a recording, the <strong>Recorder</strong> will assume that the element clicked belongs to a Windows UI element. Then, it will process some logic and check if there are any better technologies that would fit into whatever action the user is attempting to record. If it finds one, the <strong>Recorder</strong> will automatically replace the technology from “Windows” to the most appropriate technology and will suggest an Activity that better handles the automation, be it clicking on a WebElement, filling an input field in SAP or writing data to an Excel sheet. If the logic to find a different technology fails, i.e., does not find anything more useful, the <strong>Recorder</strong> will build a <strong>Selector</strong> for a <code class="docutils literal notranslate"><span class="pre">Windows</span> <span class="pre">UI</span> <span class="pre">Element</span></code>.</p>
<p>In simpler words, when using the <strong>Recorder</strong> and clicking an Excel cell, the <strong>Recorder</strong> will first assume that the element is a <code class="docutils literal notranslate"><span class="pre">Windows</span> <span class="pre">UI</span> <span class="pre">element</span></code>, but then it will realize that it is an <code class="docutils literal notranslate"><span class="pre">Excel</span> <span class="pre">element</span></code> and then will automatically replace the Activity from <code class="docutils literal notranslate"><span class="pre">Windows.GetElement</span></code> to <code class="docutils literal notranslate"><span class="pre">Office.Activities.WriteCell</span></code>, since that would be better fitting for the task.</p>
<p>There are many technologies already implemented, such as <strong>SAP</strong>, <strong>IE</strong>, <strong>Java</strong>, <strong>Image</strong> and <strong>NM</strong> (NativeMessaging: Chrome, Firefox, Edge) and many more to come!</p>
</div>
<div class="section" id="returning-multiple-elements">
<h2>Returning multiple elements<a class="headerlink" href="#returning-multiple-elements" title="Permalink to this headline">¶</a></h2>
<p>Sometimes it is needed to retrieve multiple elements instead of a single one and that can be achieved by adjusting the <strong>Selector</strong>. E.g.: After doing a search on Google, many results are presented and the user wants to manipulate all of them, not only the first one.</p>
<p>Here is a quick example of how it can be done. Still on the Google search example, using the <strong>Recorder</strong>, select an entry from any of the results.</p>
<div class="figure align-center">
<img alt="images/openrpa_recorder_click_element.png" src="images/openrpa_recorder_click_element.png" />
</div>
<p>Notice how the <strong>Recorder</strong> assumed that you only wanted that specific entry and how the <strong>Selector</strong> was built considering that.</p>
<div class="figure align-center">
<img alt="images/openrpa_recorder_change_selector.png" src="images/openrpa_recorder_change_selector.png" />
</div>
<p>To make it return not only one but multiple elements, first change the <code class="docutils literal notranslate"><span class="pre">MaxResults</span></code> property to a number higher than 1 (there is not an upper limit).</p>
<div class="figure align-center">
<img alt="images/openrpa_recorder_add_max_results_and_click_open_selector.png" src="images/openrpa_recorder_add_max_results_and_click_open_selector.png" />
</div>
<p>Now, the <strong>Selector</strong> criteria must be changed so it returns an array of elements and not a single one. When working with WebElements, that can be done by changing the <code class="docutils literal notranslate"><span class="pre">xpath</span></code> parameter so that it returns broader results.</p>
<div class="figure align-center">
<img alt="images/openrpa_recorder_change_selector_2.png" src="images/openrpa_recorder_change_selector_2.png" />
</div>
<p>Now, to make the Activity loop each element of this broader array of elements, include another <code class="docutils literal notranslate"><span class="pre">GetElement</span></code> Activity inside the sequence that was originally created by the <strong>Recorder</strong>.</p>
<div class="admonition note">
<p class="admonition-title">Note</p>
<p>Use the GetElement Activity related to the technology that the Recorder is working with. If using Windows elements, it should be Windows.GetElement. Same applies to other technologies: OpenRPA.IE.GetElement, OpenRPA.Image.GetElement, OpenRPA.NM.GetElement etc.</p>
</div>
<div class="figure align-center">
<img alt="images/openrpa_recorder_add_get_element.png" src="images/openrpa_recorder_add_get_element.png" />
</div>
<p>By opening the <strong>Selector</strong> on the newly created <code class="docutils literal notranslate"><span class="pre">GetElement</span></code>, on the left you will find an <code class="docutils literal notranslate"><span class="pre">Element</span> <span class="pre">Tree</span></code> which allows you to further select what should be manipulated. Use the <code class="docutils literal notranslate"><span class="pre">Highlight</span></code> button to debug and check if you are selecting the right element.</p>
<div class="figure align-center">
<img alt="images/openrpa_recorder_elements_highlighted.png" src="images/openrpa_recorder_elements_highlighted.png" />
</div>
<p>Now, if further automation is required for each specific entry, add those activities inside the inner <code class="docutils literal notranslate"><span class="pre">GetElement</span></code>.</p>
</div>
<div class="section" id="manually-adjusting-selectors">
<h2>Manually Adjusting Selectors<a class="headerlink" href="#manually-adjusting-selectors" title="Permalink to this headline">¶</a></h2>
<p>There are many ways users can adjust a <code class="docutils literal notranslate"><span class="pre">Selector</span></code> to fit their needs. In this section the user will learn how to pass variables to a <code class="docutils literal notranslate"><span class="pre">Selector</span></code>, how to loop through elements by using <a class="reference external" href="https://ryanstutorials.net/linuxtutorial/wildcards.php">Wildcards</a> (<code class="docutils literal notranslate"><span class="pre">https://ryanstutorials.net/linuxtutorial/wildcards.php</span></code>) and nest them within a <code class="docutils literal notranslate"><span class="pre">Selector</span></code> and a few other tricks!</p>
<div class="section" id="passing-variables-to-a-selector">
<h3>Passing Variables to a <code class="docutils literal notranslate"><span class="pre">Selector</span></code><a class="headerlink" href="#passing-variables-to-a-selector" title="Permalink to this headline">¶</a></h3>
<p>Passing variables to a <code class="docutils literal notranslate"><span class="pre">Selector</span></code> is rather easy! The users can make use of the <a class="reference external" href="https://mustache.github.io/mustache.5.html">Mustache</a> (<a class="reference external" href="https://mustache.github.io/mustache.5.html">https://mustache.github.io/mustache.5.html</a>) syntax to append a value to an existing parameter or simply use a custom parameter inside the <code class="docutils literal notranslate"><span class="pre">Selector</span></code>.</p>
<p>In this example the users will make use of the <strong>Recorder</strong> to capture an element inside a Google Search page and pass a variable to append to an existing <code class="docutils literal notranslate"><span class="pre">Selector</span></code> parameter and further on they will simply use the variable for whole parameter.</p>
<p>Users can enter any search input they would like to search for in <a class="reference external" href="https://www.google.com/">Google</a> (<code class="docutils literal notranslate"><span class="pre">https://www.google.com/</span></code>) main page. In this case, the author has opted to choose <code class="docutils literal notranslate"><span class="pre">rabbitmq</span></code>.</p>
<div class="figure align-center">
<img alt="images/openrpa_recorders_and_selectors_search_rabbitmq.png" src="images/openrpa_recorders_and_selectors_search_rabbitmq.png" />
</div>
<p>Now, users must open OpenRPA and create a new workflow. The author has chosen to name his as <code class="docutils literal notranslate"><span class="pre">Manually</span> <span class="pre">Adjusting</span> <span class="pre">Selectors</span></code>.</p>
<p>Click inside the <code class="docutils literal notranslate"><span class="pre">Sequence</span></code> and click the <strong>Recorder</strong> button inside OpenRPA’s ribbon. Now click inside the element in the page.</p>
<div class="figure align-center">
<img alt="images/openrpa_recorders_and_selectors_click_element_in_page.png" src="images/openrpa_recorders_and_selectors_click_element_in_page.png" />
</div>
<p>If users are using <code class="docutils literal notranslate"><span class="pre">Internet</span> <span class="pre">Explorer</span></code>, a new <strong>OpenRPA.IE.GetElement</strong> Activity will appear. Else, if they are using <code class="docutils literal notranslate"><span class="pre">Edge</span></code>, <code class="docutils literal notranslate"><span class="pre">Chrome</span></code> or <code class="docutils literal notranslate"><span class="pre">Firefox</span></code>, a new <strong>OpenRPA.NM.GetElement</strong> Activity will appear.</p>
<div class="figure align-center">
<img alt="images/openrpa_recorders_and_selectors_click_open_selector.png" src="images/openrpa_recorders_and_selectors_click_open_selector.png" />
</div>
<p>Now, users must click the <strong>Open Selector</strong> button and the <code class="docutils literal notranslate"><span class="pre">Selector</span> <span class="pre">Designer</span></code> will appear.</p>
<div class="figure align-center">
<img alt="images/openrpa_recorders_and_selectors_selector_window_open.png" src="images/openrpa_recorders_and_selectors_selector_window_open.png" />
</div>
<p>Now users will only replace a part of the <code class="docutils literal notranslate"><span class="pre">xpath</span></code> parameter. They shall strip - ie. remove - the <code class="docutils literal notranslate"><span class="pre">div/span/span[2]</span></code> part of the <code class="docutils literal notranslate"><span class="pre">xpath</span></code> parameter and add a <code class="docutils literal notranslate"><span class="pre">Mustache</span> <span class="pre">expression</span></code> containing the name of the variable to which the value which was stripped will be assigned. The author has opted to name that variable as <code class="docutils literal notranslate"><span class="pre">selectorValue</span></code> so the <code class="docutils literal notranslate"><span class="pre">Mustache</span> <span class="pre">expression</span></code> would become <code class="docutils literal notranslate"><span class="pre">{{selectorValue}}</span></code>.</p>
<p>After doing this users can click the <strong>Ok</strong> button to close the <code class="docutils literal notranslate"><span class="pre">Selector</span> <span class="pre">Designer</span></code>.</p>
<div class="figure align-center">
<img alt="images/openrpa_recorders_and_selectors_selector_window_strip_string.png" src="images/openrpa_recorders_and_selectors_selector_window_strip_string.png" />
</div>
<div class="figure align-center">
<img alt="images/openrpa_recorders_and_selectors_selector_window_string_stripped.png" src="images/openrpa_recorders_and_selectors_selector_window_string_stripped.png" />
</div>
<p>Now users need to assign this variable to a value - the value is the value which was stripped from the <code class="docutils literal notranslate"><span class="pre">xpath</span></code> parameter but it could be anything!</p>
<p>The possibilities are endless for manipulation. You can even use <code class="docutils literal notranslate"><span class="pre">CSS</span> <span class="pre">Selectors</span></code>! Refer to the <a class="reference internal" href="openrpa.html#using-css-selectors"><span class="std std-ref">Using CSS Selectors</span></a> for more information.</p>
<p>Drag an <strong>Assign</strong> Activity to the main sequence, just above the <strong>GetElement</strong> activity. Name it as <code class="docutils literal notranslate"><span class="pre">selectorValue</span></code> and assign to it the value which was stripped before - ie. <code class="docutils literal notranslate"><span class="pre">"div/span/span[2]"</span></code>. Press <code class="docutils literal notranslate"><span class="pre">Ctrl+K</span></code> to create the variable.</p>
<div class="figure align-center">
<img alt="images/openrpa_recorders_and_selectors_assign_selector_value.png" src="images/openrpa_recorders_and_selectors_assign_selector_value.png" />
</div>
<p>Now, delete the <strong>Click Element</strong> activity from inside the <code class="docutils literal notranslate"><span class="pre">Sequence</span></code> in the <strong>GetElement</strong> activity and drag an <strong>Assign</strong> activity inside it so we can test whether the value was really captured.</p>
<p>Name the variable <code class="docutils literal notranslate"><span class="pre">selectorText</span></code> - it is a completely arbitrary value, users can actually name it anything they would want to.</p>
<p>Assign to this variable the value <code class="docutils literal notranslate"><span class="pre">item.Text</span></code>.</p>
<div class="figure align-center">
<img alt="images/openrpa_recorders_and_selectors_assign_selector_text.png" src="images/openrpa_recorders_and_selectors_assign_selector_text.png" />
</div>
<p>Finally, drag a <strong>Show Notification</strong> activity to the main sequence and insert <code class="docutils literal notranslate"><span class="pre">selectorText</span></code> in its <code class="docutils literal notranslate"><span class="pre">Message</span></code> input field.</p>
<div class="figure align-center">
<img alt="images/openrpa_recorders_and_selectors_selector_show_notification.png" src="images/openrpa_recorders_and_selectors_selector_show_notification.png" />
</div>
<p>If you run the workflow now a <code class="docutils literal notranslate"><span class="pre">notification</span></code> will show, containing the message which was acquired.</p>
<div class="figure align-center">
<img alt="images/openrpa_recorders_and_selectors_mustache_notification.png" src="images/openrpa_recorders_and_selectors_mustache_notification.png" />
</div>
</div>
<div class="section" id="using-css-selectors">
<h3>Using CSS Selectors<a class="headerlink" href="#using-css-selectors" title="Permalink to this headline">¶</a></h3>
<p>As well as using <a class="reference external" href="https://www.w3schools.com/xml/xpath_syntax.asp">XPath Selectors</a> (<code class="docutils literal notranslate"><span class="pre">https://www.w3schools.com/xml/xpath_syntax.asp</span></code>), users can also make use of <a class="reference external" href="https://www.w3schools.com/cssref/css_selectors.asp">CSS Selectors</a> (<code class="docutils literal notranslate"><span class="pre">https://www.w3schools.com/cssref/css_selectors.asp</span></code>). In this section, users will learn how to use <code class="docutils literal notranslate"><span class="pre">CSS</span> <span class="pre">Selectors</span></code> to select all of the items pertaining to the class of <code class="docutils literal notranslate"><span class="pre">span</span></code> elements selected in the previous section by simply passing the <code class="docutils literal notranslate"><span class="pre">CSS</span></code> Selector belonging to them inside the <code class="docutils literal notranslate"><span class="pre">cssselector</span></code> parameter.</p>
<p>First, we need to locate the <code class="docutils literal notranslate"><span class="pre">CSS</span> <span class="pre">class</span></code> belonging to the class of <code class="docutils literal notranslate"><span class="pre">span</span></code> elements.</p>
<p>The users can do this by pressing either <code class="docutils literal notranslate"><span class="pre">F12</span></code> or <code class="docutils literal notranslate"><span class="pre">Ctrl+Shift+I</span></code>.</p>
<p>The <code class="docutils literal notranslate"><span class="pre">Console</span></code> window will then appear. Click on the <code class="docutils literal notranslate"><span class="pre">Elements</span></code> tab.</p>
<p>Now press <code class="docutils literal notranslate"><span class="pre">Ctrl+Shift+C</span></code> and select the <code class="docutils literal notranslate"><span class="pre">span</span></code> element.</p>
<div class="figure align-center">
<img alt="images/openrpa_recorders_and_selectors_css_selector_select_element.png" src="images/openrpa_recorders_and_selectors_css_selector_select_element.png" />
</div>
<p>Copy the name of the <code class="docutils literal notranslate"><span class="pre">CSS</span> <span class="pre">class``for</span> <span class="pre">the</span> <span class="pre">first</span> <span class="pre">``div</span></code> from which the element which was selected before inherits. In our case, this one is the <code class="docutils literal notranslate"><span class="pre">.IsZvec</span></code> class. Save the name of this class somewhere, it will be needed further on.</p>
<div class="figure align-center">
<img alt="images/openrpa_recorders_and_selectors_css_selector_copy_class.png" src="images/openrpa_recorders_and_selectors_css_selector_copy_class.png" />
</div>
<p>Now, open OpenRPA and click on the <strong>Recorder</strong> button. Then, click on the element inside the page.</p>
<div class="figure align-center">
<img alt="images/openrpa_recorders_and_selectors_click_element_in_page.png" src="images/openrpa_recorders_and_selectors_click_element_in_page.png" />
</div>
<p>Remove the <strong>Click Element</strong> Activity from the <code class="docutils literal notranslate"><span class="pre">Sequence</span></code> inside the new <strong>GetElement</strong> Activity.</p>
<div class="figure align-center">
<img alt="images/openrpa_recorders_and_selectors_css_selectors_remove_click_element.png" src="images/openrpa_recorders_and_selectors_css_selectors_remove_click_element.png" />
</div>
<p>Now, users must click the <strong>Open Selector</strong> button and the <code class="docutils literal notranslate"><span class="pre">Selector</span> <span class="pre">Designer</span></code> will appear.</p>
<p>Remove the <code class="docutils literal notranslate"><span class="pre">xpath</span></code> parameter and add a new <code class="docutils literal notranslate"><span class="pre">cssselector</span></code> parameter with value <code class="docutils literal notranslate"><span class="pre">".IsZvec"</span></code>, as shown in the image below. Finally, click the <strong>Ok</strong> button to save changes.</p>
<div class="figure align-center">
<img alt="images/openrpa_recorders_and_selectors_css_selectors_selector_designer_before.png" src="images/openrpa_recorders_and_selectors_css_selectors_selector_designer_before.png" />
</div>
<div class="figure align-center">
<img alt="images/openrpa_recorders_and_selectors_css_selectors_selector_designer_after.png" src="images/openrpa_recorders_and_selectors_css_selectors_selector_designer_after.png" />
</div>
<p>Now users must change the <code class="docutils literal notranslate"><span class="pre">MaxResults</span></code> parameter to a number they find fit. In our case, since Googles Search Engine only shows 10 results per page the author has opted to set <code class="docutils literal notranslate"><span class="pre">MaxResults</span></code> as 10.</p>
<p>Users must change the <code class="docutils literal notranslate"><span class="pre">MinResults</span></code> to <code class="docutils literal notranslate"><span class="pre">0</span></code> as well in case OpenRPA does not find any elements containing the <code class="docutils literal notranslate"><span class="pre">cssselector</span></code> set previously.</p>
<p>Finally, it is recommended that users set the <code class="docutils literal notranslate"><span class="pre">Timeout</span></code> parameter to <code class="docutils literal notranslate"><span class="pre">00:00:00</span></code> or <code class="docutils literal notranslate"><span class="pre">TimeSpan.FromSeconds(0)</span></code>.</p>
<div class="figure align-center">
<img alt="images/openrpa_recorders_and_selectors_css_selectors_get_element_properties.png" src="images/openrpa_recorders_and_selectors_css_selectors_get_element_properties.png" />
</div>
<p>Now, for every Activity put in the <code class="docutils literal notranslate"><span class="pre">Sequence</span></code> inside the <strong>NM/IE.GetElement</strong> Activity, it will be looped over for every element containing the <code class="docutils literal notranslate"><span class="pre">.IsZvec</span></code> class.</p>
<p>The above can be tested by dragging a <strong>WriteLine</strong> Activity to the end of this <code class="docutils literal notranslate"><span class="pre">Sequence</span></code> and assigning to its <code class="docutils literal notranslate"><span class="pre">Text</span></code> input the <code class="docutils literal notranslate"><span class="pre">item.Text</span></code> value.</p>
<div class="figure align-center">
<img alt="images/openrpa_recorders_and_selectors_css_selectors_drag_writeline.png" src="images/openrpa_recorders_and_selectors_css_selectors_drag_writeline.png" />
</div>
<p>When the Workflow is run now it will show the text for every element containing the class which was set up before.</p>
<div class="figure align-center">
<img alt="images/openrpa_recorders_and_selectors_css_selectors_finished.png" src="images/openrpa_recorders_and_selectors_css_selectors_finished.png" />
</div>
<p>That’s it! Users now know how to successfully set up a <code class="docutils literal notranslate"><span class="pre">CSS</span> <span class="pre">Selector</span></code> inside OpenRPA.</p>
</div>
<div class="section" id="using-wildcards">
<h3>Using Wildcards<a class="headerlink" href="#using-wildcards" title="Permalink to this headline">¶</a></h3>
<p>In this section users will learn how to capture multiple elements inside a given <a class="reference external" href="https://www.w3schools.com/jsref/dom_obj_all.asp">HTML DOM Element Object</a> (<code class="docutils literal notranslate"><span class="pre">https://www.w3schools.com/jsref/dom_obj_all.asp</span></code>), in a similar way to how <a class="reference internal" href="openrpa.html#using-css-selectors"><span class="std std-ref">Using CSS Selectors</span></a> works, but using <a class="reference external" href="https://www.w3schools.com/xml/xpath_syntax.asp">XPath Selectors</a> (<code class="docutils literal notranslate"><span class="pre">https://www.w3schools.com/xml/xpath_syntax.asp</span></code>)</p>
<p>Open OpenRPA and click on the <strong>Recorder</strong> button. Then, click on the element inside the page.</p>
<div class="figure align-center">
<img alt="images/openrpa_recorders_and_selectors_click_element_in_page.png" src="images/openrpa_recorders_and_selectors_click_element_in_page.png" />
</div>
<p>Remove the <strong>Click Element</strong> Activity from the <code class="docutils literal notranslate"><span class="pre">Sequence</span></code> inside the new <strong>GetElement</strong> Activity.</p>
<div class="figure align-center">
<img alt="images/openrpa_recorders_and_selectors_css_selectors_remove_click_element.png" src="images/openrpa_recorders_and_selectors_css_selectors_remove_click_element.png" />
</div>
<p>Now, users must click the <strong>Open Selector</strong> button and the <code class="docutils literal notranslate"><span class="pre">Selector</span> <span class="pre">Designer</span></code> will appear.</p>
<div class="figure align-center">
<img alt="images/openrpa_recorders_and_selectors_selector_window_open.png" src="images/openrpa_recorders_and_selectors_selector_window_open.png" />
</div>
<p>Now users will only cut out a part of the <code class="docutils literal notranslate"><span class="pre">xpath</span></code> parameter. They shall replace the <code class="docutils literal notranslate"><span class="pre">div[3]/div/div[2]/div/span</span></code> substring from the <code class="docutils literal notranslate"><span class="pre">xpath</span></code> parameter for <code class="docutils literal notranslate"><span class="pre">div[*]/div/div[2]/div/span</span></code>. This allows OpenRPA to capture all the <code class="docutils literal notranslate"><span class="pre">10</span></code> search elements.</p>
<p>After doing this, users can click the <strong>Ok</strong> button to close the <code class="docutils literal notranslate"><span class="pre">Selector</span> <span class="pre">Designer</span></code>.</p>
<div class="figure align-center">
<img alt="images/openrpa_recorders_and_selectors_nesting_get_elements_selector_window_strip_string.png" src="images/openrpa_recorders_and_selectors_nesting_get_elements_selector_window_strip_string.png" />
</div>
<div class="figure align-center">
<img alt="images/openrpa_recorders_and_selectors_nesting_get_elements_selector_window_string_stripped.png" src="images/openrpa_recorders_and_selectors_nesting_get_elements_selector_window_string_stripped.png" />
</div>
<p>Now users can test it worked by dragging a <strong>WriteLine</strong> Activity to the <code class="docutils literal notranslate"><span class="pre">Sequence</span></code> inside the <strong>IE/NM.GetElement</strong> Activity generated by the <strong>Recorder</strong> and assigning to its <code class="docutils literal notranslate"><span class="pre">Text</span></code> input field the <code class="docutils literal notranslate"><span class="pre">item.Text</span></code> value.</p>
<div class="figure align-center">
<img alt="images/openrpa_recorders_and_selectors_nesting_get_elements_drag_write_line.png" src="images/openrpa_recorders_and_selectors_nesting_get_elements_drag_write_line.png" />
</div>
<p>After running the Workflow, users will notice that it has successfully captured the 10 <code class="docutils literal notranslate"><span class="pre">span</span></code> elements found.</p>
<div class="figure align-center">
<img alt="images/openrpa_recorders_and_selectors_nesting_get_elements_finished.png" src="images/openrpa_recorders_and_selectors_nesting_get_elements_finished.png" />
</div>
</div>
</div>
</div>
</div>
</div>
<footer>
<hr/>
<div role="contentinfo">
<p>
© Copyright 2020, Thiago Pestitschek, Diego Thijssen, Tiago Bentivoglio, Paulo Veras
</p>
</div>
Built with <a href="http://sphinx-doc.org/">Sphinx</a> using a <a href="https://github.com/rtfd/sphinx_rtd_theme">theme</a> provided by <a href="https://readthedocs.org">Read the Docs</a>.
<p>Powered by <a href="https://bpatechnologies.com/">BPA Technologies</a></p>
</footer>
</div>
</div>
</section>
</div>
<script type="text/javascript">
jQuery(function () {
SphinxRtdTheme.Navigation.enable(true);
});
</script>
<h4>>Powered by BPA Technologies - bpatechnologies.com</h4>
</body>
</html>