kraken-mobile 1.0.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +7 -0
- data/LICENSE +8 -0
- data/README.md +169 -0
- data/bin/kraken-mobile +91 -0
- data/bin/kraken-mobile-calabash-android.rb +85 -0
- data/bin/kraken-mobile-generate.rb +19 -0
- data/bin/kraken-mobile-helpers.rb +48 -0
- data/bin/kraken-mobile-setup.rb +50 -0
- data/calabash-android-features-skeleton/my_first.feature +11 -0
- data/calabash-android-features-skeleton/step_definitions/kraken_steps.rb +1 -0
- data/calabash-android-features-skeleton/support/app_installation_hooks.rb +25 -0
- data/calabash-android-features-skeleton/support/app_life_cycle_hooks.rb +10 -0
- data/calabash-android-features-skeleton/support/env.rb +1 -0
- data/lib/kraken-mobile.rb +29 -0
- data/lib/kraken-mobile/constants.rb +25 -0
- data/lib/kraken-mobile/helpers/command_helper.rb +38 -0
- data/lib/kraken-mobile/helpers/devices_helper/adb_helper.rb +157 -0
- data/lib/kraken-mobile/helpers/devices_helper/manager.rb +43 -0
- data/lib/kraken-mobile/helpers/feature_analyzer.rb +28 -0
- data/lib/kraken-mobile/helpers/feature_grouper.rb +48 -0
- data/lib/kraken-mobile/helpers/reporter.rb +381 -0
- data/lib/kraken-mobile/models/device.rb +32 -0
- data/lib/kraken-mobile/protocols/file_protocol.rb +126 -0
- data/lib/kraken-mobile/runners/calabash/android/android_runner.rb +130 -0
- data/lib/kraken-mobile/runners/calabash/android/apk_signer.rb +14 -0
- data/lib/kraken-mobile/runners/calabash/android/cucumber.rb +27 -0
- data/lib/kraken-mobile/runners/calabash/android/kraken_hooks.rb +15 -0
- data/lib/kraken-mobile/runners/calabash/android/kraken_steps.rb +3 -0
- data/lib/kraken-mobile/runners/calabash/android/monkey_helper.rb +139 -0
- data/lib/kraken-mobile/runners/calabash/android/operations.rb +44 -0
- data/lib/kraken-mobile/runners/calabash/android/steps/communication_steps.rb +57 -0
- data/lib/kraken-mobile/runners/calabash/monkey/monkey_runner.rb +113 -0
- data/lib/kraken-mobile/runners/runner.rb +18 -0
- data/lib/kraken-mobile/version.rb +5 -0
- data/reporter/assets/css/bootstrap.min.css +6 -0
- data/reporter/assets/css/dataTables.bootstrap.min.css +1 -0
- data/reporter/assets/css/feature_index.css +449 -0
- data/reporter/assets/css/font-awesome.min.css +4 -0
- data/reporter/assets/css/responsive.dataTables.min.css +1 -0
- data/reporter/assets/css/scenario_index.css +461 -0
- data/reporter/assets/fonts/FontAwesome.otf +0 -0
- data/reporter/assets/fonts/fontawesome-webfont.eot +0 -0
- data/reporter/assets/fonts/fontawesome-webfont.svg +2671 -0
- data/reporter/assets/fonts/fontawesome-webfont.ttf +0 -0
- data/reporter/assets/fonts/fontawesome-webfont.woff +0 -0
- data/reporter/assets/fonts/fontawesome-webfont.woff2 +0 -0
- data/reporter/assets/fonts/glyphicons-halflings-regular.eot +0 -0
- data/reporter/assets/fonts/glyphicons-halflings-regular.svg +288 -0
- data/reporter/assets/fonts/glyphicons-halflings-regular.ttf +0 -0
- data/reporter/assets/fonts/glyphicons-halflings-regular.woff +0 -0
- data/reporter/assets/fonts/glyphicons-halflings-regular.woff2 +0 -0
- data/reporter/assets/images/kraken.png +0 -0
- data/reporter/assets/js/Chart.min.js +14 -0
- data/reporter/assets/js/bootstrap.min.js +7 -0
- data/reporter/assets/js/d3.chart.min.js +7 -0
- data/reporter/assets/js/d3.v3.min.js +5 -0
- data/reporter/assets/js/dataTables.bootstrap.min.js +8 -0
- data/reporter/assets/js/dataTables.responsive.min.js +26 -0
- data/reporter/assets/js/first-sankey.js +292 -0
- data/reporter/assets/js/gitgraph.min.js +10 -0
- data/reporter/assets/js/html5shiv.min.js +4 -0
- data/reporter/assets/js/jquery-3.2.1.min.js +4 -0
- data/reporter/assets/js/jquery.dataTables.min.js +167 -0
- data/reporter/assets/js/respond.min.js +5 -0
- data/reporter/assets/js/sankey.js +512 -0
- data/reporter/feature_report.html.erb +274 -0
- data/reporter/index.html.erb +711 -0
- data/reporter/scenario_report.html.erb +174 -0
- metadata +169 -0
@@ -0,0 +1,274 @@
|
|
1
|
+
<html lang="en">
|
2
|
+
<head>
|
3
|
+
<meta charset="UTF-8">
|
4
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
5
|
+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
6
|
+
<title>Report</title>
|
7
|
+
|
8
|
+
<!-- Dependencies -->
|
9
|
+
<link rel="stylesheet" href="../assets/css/bootstrap.min.css">
|
10
|
+
<link href="../assets/css/font-awesome.min.css" rel="stylesheet">
|
11
|
+
<link href="../assets/css/dataTables.bootstrap.min.css" rel="stylesheet">
|
12
|
+
<link href="../assets/css/responsive.dataTables.min.css" rel="stylesheet">
|
13
|
+
<link href="../assets/css/feature_index.css" rel="stylesheet">
|
14
|
+
</head>
|
15
|
+
<body>
|
16
|
+
<nav class="navbar">
|
17
|
+
<div class="container-fluid">
|
18
|
+
<p class="navbar-text">Report</p>
|
19
|
+
</div>
|
20
|
+
</nav>
|
21
|
+
|
22
|
+
<div class="main_conainer">
|
23
|
+
<div class="row">
|
24
|
+
<div class="col-md-6 col-lg-6 col-xs-12">
|
25
|
+
<div class="x_panel fixed_height_320">
|
26
|
+
<div class="x_title">
|
27
|
+
<h2>Features</h2>
|
28
|
+
<div class="clearfix"></div>
|
29
|
+
</div>
|
30
|
+
<div class="x_content">
|
31
|
+
<table class="chart">
|
32
|
+
<tr>
|
33
|
+
<th>
|
34
|
+
<p>Chart</p>
|
35
|
+
</th>
|
36
|
+
<th>
|
37
|
+
<div class="col-lg-7 col-md-7 col-sm-7 col-xs-7">
|
38
|
+
<p class="">Status</p>
|
39
|
+
</div>
|
40
|
+
<div class="col-lg-5 col-md-5 col-sm-5 col-xs-5">
|
41
|
+
<p class="">Progress</p>
|
42
|
+
</div>
|
43
|
+
</th>
|
44
|
+
</tr> <!-- Row Names -->
|
45
|
+
<tr>
|
46
|
+
<td class="chart">
|
47
|
+
<canvas id="feature-chart"></canvas>
|
48
|
+
<div class="total"><%= @features.count %></div>
|
49
|
+
</td>
|
50
|
+
<td>
|
51
|
+
<table class="tile_info">
|
52
|
+
<tr>
|
53
|
+
<td>
|
54
|
+
<p data-toggle="tooltip" data-placement="left" title="Features passed">
|
55
|
+
<i class="fa fa-check-circle passed-color"></i>
|
56
|
+
Passed
|
57
|
+
</p>
|
58
|
+
</td>
|
59
|
+
<td class="percentage"><%= @total_passed_features_percentage %> %</td>
|
60
|
+
</tr>
|
61
|
+
<tr>
|
62
|
+
<td>
|
63
|
+
<p data-toggle="tooltip" data-placement="left" title="Features failed">
|
64
|
+
<i class="fa fa-exclamation-circle failed-color"></i>
|
65
|
+
Failed
|
66
|
+
</p>
|
67
|
+
</td>
|
68
|
+
<td class="percentage"><%= @total_failed_features_percentage %> %</td>
|
69
|
+
</tr>
|
70
|
+
</table>
|
71
|
+
</td>
|
72
|
+
</tr> <!-- Row values -->
|
73
|
+
</table>
|
74
|
+
</div>
|
75
|
+
</div>
|
76
|
+
</div> <!-- Left data -->
|
77
|
+
<div class="col-md-6 col-lg-6 col-xs-12">
|
78
|
+
<div class="x_panel fixed_height_320">
|
79
|
+
<div class="x_title">
|
80
|
+
<h2>Scenarios</h2>
|
81
|
+
<div class="clearfix"></div>
|
82
|
+
</div>
|
83
|
+
<div class="x_content">
|
84
|
+
<table class="chart">
|
85
|
+
<tr>
|
86
|
+
<th>
|
87
|
+
<p>Chart</p>
|
88
|
+
</th>
|
89
|
+
<th>
|
90
|
+
<div class="col-lg-7 col-md-7 col-sm-7 col-xs-7">
|
91
|
+
<p class="">Status</p>
|
92
|
+
</div>
|
93
|
+
<div class="col-lg-5 col-md-5 col-sm-5 col-xs-5">
|
94
|
+
<p class="">Progress</p>
|
95
|
+
</div> <!-- Row Names -->
|
96
|
+
</th>
|
97
|
+
</tr>
|
98
|
+
<tr>
|
99
|
+
<td class="chart">
|
100
|
+
<canvas id="scenario-chart"></canvas>
|
101
|
+
<div class="total"><%= @total_scenarios %></div>
|
102
|
+
</td>
|
103
|
+
<td>
|
104
|
+
<table class="tile_info">
|
105
|
+
<tr>
|
106
|
+
<td>
|
107
|
+
<p data-toggle="tooltip" data-placement="left" title="Scenario passed">
|
108
|
+
<i class="fa fa-check-circle passed-color"></i>
|
109
|
+
Passed
|
110
|
+
</p>
|
111
|
+
</td>
|
112
|
+
<td class="percentage"><%= @total_passed_scenarios_percentage %> %</td>
|
113
|
+
</tr>
|
114
|
+
<tr>
|
115
|
+
<td>
|
116
|
+
<p data-toggle="tooltip" data-placement="left" title="Scenario failed">
|
117
|
+
<i class="fa fa-exclamation-circle failed-color"></i>
|
118
|
+
Failed
|
119
|
+
</p>
|
120
|
+
</td>
|
121
|
+
<td class="percentage"><%= @total_failed_scenarios_percentage %> %</td>
|
122
|
+
</tr> <!-- Row values -->
|
123
|
+
</table>
|
124
|
+
</td>
|
125
|
+
</tr>
|
126
|
+
</table>
|
127
|
+
</div>
|
128
|
+
</div>
|
129
|
+
</div> <!-- Right data -->
|
130
|
+
|
131
|
+
<div class="row">
|
132
|
+
<div class="col-md-12 col-sm-12 col-xs-12">
|
133
|
+
<div class="x_panel">
|
134
|
+
<div class="x_title">
|
135
|
+
<h2>Features overview</h2>
|
136
|
+
<div class="clearfix"></div>
|
137
|
+
</div>
|
138
|
+
<div class="x_content">
|
139
|
+
<div class="table-responsive">
|
140
|
+
<table id="features-table" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0"
|
141
|
+
width="100%">
|
142
|
+
<thead>
|
143
|
+
<tr>
|
144
|
+
<th>Feature name</th>
|
145
|
+
<th>Status</th>
|
146
|
+
<th>Device</th>
|
147
|
+
<th>OS</th>
|
148
|
+
<th>App</th>
|
149
|
+
<th>Duration</th>
|
150
|
+
<th>Total</th>
|
151
|
+
<th>Passed</th>
|
152
|
+
<th>Failed</th>
|
153
|
+
</tr>
|
154
|
+
</thead> <!-- Table Header -->
|
155
|
+
<tbody>
|
156
|
+
<% @features.each do |f| %>
|
157
|
+
<tr>
|
158
|
+
<td>
|
159
|
+
<a href='<%= "./features_report/#{feature_id(f)}.html" %>'>
|
160
|
+
<%= f["name"] %>
|
161
|
+
</a>
|
162
|
+
</td>
|
163
|
+
<td class="text-center">
|
164
|
+
<% if feature_passed?(f) %>
|
165
|
+
<i class="fa fa-check-circle passed-color fa-lg" data-toggle="tooltip" data-placement="top" title="Passed">
|
166
|
+
<span>check-circle passed-color</span>
|
167
|
+
</i>
|
168
|
+
<% else %>
|
169
|
+
<i class="fa fa-exclamation-circle failed-color fa-lg" data-toggle="tooltip" data-placement="top" title="Failed">
|
170
|
+
<span>exclamation-circle failed-color</span>
|
171
|
+
</i>
|
172
|
+
<% end %>
|
173
|
+
</td>
|
174
|
+
<td>
|
175
|
+
<%= device.model %> - <%= device.id %>
|
176
|
+
</td>
|
177
|
+
<td>
|
178
|
+
<i class="fa fa-android fa-lg"><span>android</span></i>
|
179
|
+
</td>
|
180
|
+
<td>
|
181
|
+
<%= @apk_path %>
|
182
|
+
</td>
|
183
|
+
<td><%= format_duration(feature_duration(f)) %></td>
|
184
|
+
<td class="text-right "><%= f["elements"].count %></td>
|
185
|
+
<td class="text-right none"><%= passed_scenarios(f).count %></td>
|
186
|
+
<td class="text-right none"><%= failed_scenarios(f).count %></td>
|
187
|
+
</tr> <!-- Feature Row -->
|
188
|
+
<% end %>
|
189
|
+
</tbody>
|
190
|
+
</table>
|
191
|
+
</div>
|
192
|
+
</div>
|
193
|
+
</div>
|
194
|
+
</div>
|
195
|
+
</div>
|
196
|
+
</div>
|
197
|
+
|
198
|
+
<script src="../assets/js/jquery-3.2.1.min.js" ></script>
|
199
|
+
<script src="../assets/js/bootstrap.min.js"></script>
|
200
|
+
<script src="../assets/js/jquery.dataTables.min.js"></script>
|
201
|
+
<script src="../assets/js/dataTables.bootstrap.min.js"></script>
|
202
|
+
<script src="../assets/js/dataTables.responsive.min.js"></script>
|
203
|
+
<script src="../assets/js/Chart.min.js"></script>
|
204
|
+
<script>
|
205
|
+
$(document).ready(function () {
|
206
|
+
total_passed_features = parseInt("<%= total_passed_features(@features) %>");
|
207
|
+
total_failed_features = parseInt("<%= total_failed_features(@features) %>");
|
208
|
+
total_passed_scenarios = parseInt("<%= total_passed_scenarios(@features) %>");
|
209
|
+
total_failed_scenarios = parseInt("<%= total_failed_scenarios(@features) %>");
|
210
|
+
|
211
|
+
feature_data = [total_passed_features,total_failed_features];
|
212
|
+
scenario_data = [total_passed_scenarios,total_failed_scenarios]
|
213
|
+
|
214
|
+
$('#features-table').dataTable({
|
215
|
+
"order": [[0, "asc"]],
|
216
|
+
"lengthMenu": [[10, 20, 50, -1], [10, 20, 50, "All"]],
|
217
|
+
"stateSave": true
|
218
|
+
});
|
219
|
+
|
220
|
+
var featureOptions = {
|
221
|
+
legend: false,
|
222
|
+
responsive: false
|
223
|
+
};
|
224
|
+
|
225
|
+
new Chart(document.getElementById("feature-chart"), {
|
226
|
+
type: 'doughnut',
|
227
|
+
tooltipFillColor: "rgba(51, 51, 51, 0.55)",
|
228
|
+
data: {
|
229
|
+
labels: [
|
230
|
+
"Passed",
|
231
|
+
"Failed"
|
232
|
+
],
|
233
|
+
datasets: [{
|
234
|
+
data: feature_data,
|
235
|
+
backgroundColor: [
|
236
|
+
"#26B99A",
|
237
|
+
"#E74C3C"
|
238
|
+
]
|
239
|
+
}]
|
240
|
+
},
|
241
|
+
options: featureOptions
|
242
|
+
});
|
243
|
+
|
244
|
+
var scenarioOptions = {
|
245
|
+
legend: false,
|
246
|
+
responsive: false
|
247
|
+
};
|
248
|
+
|
249
|
+
new Chart(document.getElementById("scenario-chart"), {
|
250
|
+
type: 'doughnut',
|
251
|
+
tooltipFillColor: "rgba(51, 51, 51, 0.55)",
|
252
|
+
data: {
|
253
|
+
labels: [
|
254
|
+
"Passed",
|
255
|
+
"Failed"
|
256
|
+
],
|
257
|
+
datasets: [{
|
258
|
+
data: scenario_data,
|
259
|
+
backgroundColor: [
|
260
|
+
"#26B99A",
|
261
|
+
"#E74C3C"
|
262
|
+
]
|
263
|
+
}]
|
264
|
+
},
|
265
|
+
options: scenarioOptions
|
266
|
+
});
|
267
|
+
|
268
|
+
$('body').tooltip({
|
269
|
+
selector: '[data-toggle="tooltip"]'
|
270
|
+
});
|
271
|
+
});
|
272
|
+
</script>
|
273
|
+
</body>
|
274
|
+
</html>
|
@@ -0,0 +1,711 @@
|
|
1
|
+
<!DOCTYPE html>
|
2
|
+
<html>
|
3
|
+
<head>
|
4
|
+
<meta charset="utf-8">
|
5
|
+
<title>Report</title>
|
6
|
+
|
7
|
+
<!-- Dependencies -->
|
8
|
+
<link rel="stylesheet" href="./assets/css/bootstrap.min.css">
|
9
|
+
<link href="./assets/css/font-awesome.min.css" rel="stylesheet">
|
10
|
+
<link href="./assets/css/dataTables.bootstrap.min.css" rel="stylesheet">
|
11
|
+
<style>
|
12
|
+
body {
|
13
|
+
color: #73879C;
|
14
|
+
background: #F7F7F7;
|
15
|
+
font-family: "Helvetica Neue", Roboto, Arial, "Droid Sans", sans-serif;
|
16
|
+
font-size: 13px;
|
17
|
+
font-weight: 400;
|
18
|
+
line-height: 1.471;
|
19
|
+
}
|
20
|
+
|
21
|
+
.main_conainer {
|
22
|
+
padding: 10px 20px 0;
|
23
|
+
}
|
24
|
+
|
25
|
+
i span {
|
26
|
+
display: none;
|
27
|
+
}
|
28
|
+
|
29
|
+
/* Navigation */
|
30
|
+
nav.navbar {
|
31
|
+
background: #EDEDED;
|
32
|
+
border-bottom: 1px solid #D9DEE4;
|
33
|
+
margin-bottom: 10px;
|
34
|
+
}
|
35
|
+
|
36
|
+
nav .navbar-brand {
|
37
|
+
border-right: 1px solid #D9DEE4;
|
38
|
+
color: #5A738E;
|
39
|
+
}
|
40
|
+
|
41
|
+
nav .navbar-text {
|
42
|
+
font-size: 18px;
|
43
|
+
height: 50px;
|
44
|
+
margin-bottom: 0;
|
45
|
+
margin-top: 0;
|
46
|
+
padding: 15px 0;
|
47
|
+
}
|
48
|
+
|
49
|
+
/* Table */
|
50
|
+
table {
|
51
|
+
width: 100%;
|
52
|
+
}
|
53
|
+
|
54
|
+
table.chart tr th:first-of-type {
|
55
|
+
width: 33.333%;
|
56
|
+
}
|
57
|
+
|
58
|
+
.table > thead > tr > th {
|
59
|
+
background: #F5F7FA;
|
60
|
+
}
|
61
|
+
|
62
|
+
table.tile h3, table.tile h4, table.tile span {
|
63
|
+
font-weight: bold;
|
64
|
+
vertical-align: middle !important;
|
65
|
+
}
|
66
|
+
|
67
|
+
table.tile th, table.tile td {
|
68
|
+
text-align: center;
|
69
|
+
}
|
70
|
+
|
71
|
+
table.tile th {
|
72
|
+
border-bottom: 1px solid #E6ECEE;
|
73
|
+
}
|
74
|
+
|
75
|
+
table.tile td {
|
76
|
+
padding: 5px 0;
|
77
|
+
}
|
78
|
+
|
79
|
+
table.tile td ul {
|
80
|
+
text-align: left;
|
81
|
+
padding-left: 0;
|
82
|
+
}
|
83
|
+
|
84
|
+
table.tile td ul li {
|
85
|
+
list-style: none;
|
86
|
+
width: 100%;
|
87
|
+
}
|
88
|
+
|
89
|
+
table.tile td ul li a {
|
90
|
+
width: 100%;
|
91
|
+
}
|
92
|
+
|
93
|
+
table.tile td ul li a big {
|
94
|
+
right: 0;
|
95
|
+
float: right;
|
96
|
+
margin-right: 13px;
|
97
|
+
}
|
98
|
+
|
99
|
+
table.tile_info {
|
100
|
+
width: 100%;
|
101
|
+
}
|
102
|
+
|
103
|
+
table.tile_info td {
|
104
|
+
text-align: left;
|
105
|
+
padding: 1px;
|
106
|
+
font-size: 15px;
|
107
|
+
}
|
108
|
+
|
109
|
+
table.tile_info td p {
|
110
|
+
white-space: nowrap;
|
111
|
+
overflow: hidden;
|
112
|
+
text-overflow: ellipsis;
|
113
|
+
margin: 0;
|
114
|
+
line-height: 28px;
|
115
|
+
}
|
116
|
+
|
117
|
+
table.tile_info td i {
|
118
|
+
display: inline-block;
|
119
|
+
margin-right: 8px;
|
120
|
+
font-size: 17px;
|
121
|
+
float: left;
|
122
|
+
width: 18px;
|
123
|
+
line-height: 28px;
|
124
|
+
text-align: center;
|
125
|
+
}
|
126
|
+
|
127
|
+
table.tile_info td:first-child {
|
128
|
+
width: 65%;
|
129
|
+
}
|
130
|
+
|
131
|
+
td span {
|
132
|
+
line-height: 28px;
|
133
|
+
}
|
134
|
+
|
135
|
+
table.tile_info td.percentage {
|
136
|
+
text-align: right;
|
137
|
+
|
138
|
+
}
|
139
|
+
|
140
|
+
/* chart in table */
|
141
|
+
table td.chart {
|
142
|
+
display: inline-block;
|
143
|
+
position: relative;
|
144
|
+
}
|
145
|
+
|
146
|
+
table td.chart #feature-chart,
|
147
|
+
table td.chart #scenario-chart,
|
148
|
+
table td.chart .total {
|
149
|
+
height: 140px;
|
150
|
+
margin: 15px 10px 10px 0;
|
151
|
+
width: 140px;
|
152
|
+
}
|
153
|
+
|
154
|
+
table td.chart .total {
|
155
|
+
display: inline-block;
|
156
|
+
position: absolute;
|
157
|
+
font-size: 2em;
|
158
|
+
height: 50px;
|
159
|
+
line-height: 50px;
|
160
|
+
top: 45px;
|
161
|
+
left: 45px;
|
162
|
+
text-align: center;
|
163
|
+
vertical-align: middle;
|
164
|
+
width: 50px;
|
165
|
+
}
|
166
|
+
|
167
|
+
/* colors */
|
168
|
+
.ambiguous-color {
|
169
|
+
color: #E74C3C !important;
|
170
|
+
}
|
171
|
+
|
172
|
+
.failed-color {
|
173
|
+
color: #E74C3C !important;
|
174
|
+
}
|
175
|
+
|
176
|
+
.not-defined-color {
|
177
|
+
color: #F39C12 !important;
|
178
|
+
}
|
179
|
+
|
180
|
+
.passed-color {
|
181
|
+
color: #1ABB9C !important;
|
182
|
+
}
|
183
|
+
|
184
|
+
.pending-color {
|
185
|
+
color: #FFD119 !important;
|
186
|
+
}
|
187
|
+
|
188
|
+
.skipped-color {
|
189
|
+
color: #3498DB !important;
|
190
|
+
}
|
191
|
+
|
192
|
+
/* backgrounds */
|
193
|
+
.ambiguous-background {
|
194
|
+
background: #b73122 !important;
|
195
|
+
}
|
196
|
+
|
197
|
+
.failed-background {
|
198
|
+
background: #E74C3C !important;
|
199
|
+
}
|
200
|
+
|
201
|
+
.not-defined-background {
|
202
|
+
background: #F39C12 !important;
|
203
|
+
}
|
204
|
+
|
205
|
+
.passed-background {
|
206
|
+
background: #1ABB9C !important;
|
207
|
+
}
|
208
|
+
|
209
|
+
.pending-background {
|
210
|
+
background: #FFD119 !important;
|
211
|
+
}
|
212
|
+
|
213
|
+
.skipped-background {
|
214
|
+
background: #3498DB !important;
|
215
|
+
}
|
216
|
+
|
217
|
+
/* general */
|
218
|
+
.x_panel {
|
219
|
+
position: relative;
|
220
|
+
width: 100%;
|
221
|
+
margin-bottom: 10px;
|
222
|
+
padding: 10px 17px;
|
223
|
+
display: inline-block;
|
224
|
+
background: #fff;
|
225
|
+
border: 1px solid #E6E9ED;
|
226
|
+
-webkit-column-break-inside: avoid;
|
227
|
+
-moz-column-break-inside: avoid;
|
228
|
+
column-break-inside: avoid;
|
229
|
+
opacity: 1;
|
230
|
+
transition: all .2s ease;
|
231
|
+
}
|
232
|
+
|
233
|
+
.x_title {
|
234
|
+
border-bottom: 2px solid #E6E9ED;
|
235
|
+
padding: 1px 5px 6px;
|
236
|
+
margin-bottom: 10px;
|
237
|
+
}
|
238
|
+
|
239
|
+
.x_title .filter {
|
240
|
+
width: 40%;
|
241
|
+
float: right;
|
242
|
+
}
|
243
|
+
|
244
|
+
.x_title h2 {
|
245
|
+
margin: 5px 0 6px;
|
246
|
+
float: left;
|
247
|
+
font-size: 24px;
|
248
|
+
font-weight: 400;
|
249
|
+
display: block;
|
250
|
+
text-overflow: ellipsis;
|
251
|
+
overflow: hidden;
|
252
|
+
white-space: nowrap;
|
253
|
+
}
|
254
|
+
|
255
|
+
.fixed_height_320 {
|
256
|
+
height: 320px;
|
257
|
+
}
|
258
|
+
|
259
|
+
.x_title h2 small {
|
260
|
+
margin-left: 10px;
|
261
|
+
}
|
262
|
+
|
263
|
+
.x_title span {
|
264
|
+
color: #BDBDBD;
|
265
|
+
}
|
266
|
+
|
267
|
+
.x_content {
|
268
|
+
padding: 0 5px 6px;
|
269
|
+
position: relative;
|
270
|
+
width: 100%;
|
271
|
+
float: left;
|
272
|
+
clear: both;
|
273
|
+
margin-top: 5px;
|
274
|
+
overflow-x: scroll;
|
275
|
+
}
|
276
|
+
|
277
|
+
.x_content h4 {
|
278
|
+
font-size: 16px;
|
279
|
+
font-weight: 500;
|
280
|
+
}
|
281
|
+
|
282
|
+
.panel_toolbox {
|
283
|
+
float: right;
|
284
|
+
margin: 5px 0 0;
|
285
|
+
min-width: 70px;
|
286
|
+
}
|
287
|
+
|
288
|
+
.panel_toolbox > li {
|
289
|
+
float: right;
|
290
|
+
}
|
291
|
+
|
292
|
+
.panel_toolbox > li > a {
|
293
|
+
cursor: pointer;
|
294
|
+
}
|
295
|
+
|
296
|
+
.panel_toolbox > li > a {
|
297
|
+
padding: 5px;
|
298
|
+
color: #C5C7CB;
|
299
|
+
font-size: 14px;
|
300
|
+
}
|
301
|
+
|
302
|
+
.panel_toolbox > li > a:hover {
|
303
|
+
background: #F5F7FA;
|
304
|
+
}
|
305
|
+
|
306
|
+
.page-title {
|
307
|
+
width: 100%;
|
308
|
+
padding: 10px 0 30px 0;
|
309
|
+
}
|
310
|
+
|
311
|
+
.page-title {
|
312
|
+
display: block;
|
313
|
+
}
|
314
|
+
|
315
|
+
.page-title h1 {
|
316
|
+
margin: 9px 0;
|
317
|
+
}
|
318
|
+
|
319
|
+
.page-title .title_right {
|
320
|
+
width: 55%;
|
321
|
+
float: left;
|
322
|
+
display: block;
|
323
|
+
}
|
324
|
+
|
325
|
+
.page-title .title_right .pull-right {
|
326
|
+
margin: 10px 0;
|
327
|
+
}
|
328
|
+
|
329
|
+
.page-title p {
|
330
|
+
margin-left: 15px;
|
331
|
+
}
|
332
|
+
|
333
|
+
.dashboard-widget-content {
|
334
|
+
padding-top: 9px;
|
335
|
+
}
|
336
|
+
|
337
|
+
.dashboard-widget-content .sidebar-widget {
|
338
|
+
width: 50%;
|
339
|
+
display: inline-block;
|
340
|
+
vertical-align: top;
|
341
|
+
background: #fff;
|
342
|
+
border: 1px solid #abd9ea;
|
343
|
+
border-radius: 5px;
|
344
|
+
text-align: center;
|
345
|
+
float: right;
|
346
|
+
padding: 2px;
|
347
|
+
margin-top: 10px;
|
348
|
+
}
|
349
|
+
|
350
|
+
ul.quick-list {
|
351
|
+
padding-left: 0;
|
352
|
+
display: inline-block;
|
353
|
+
}
|
354
|
+
|
355
|
+
ul.quick-list li,
|
356
|
+
table.quick-list tr {
|
357
|
+
padding-left: 10px;
|
358
|
+
list-style: none;
|
359
|
+
margin: 0;
|
360
|
+
padding-bottom: 6px;
|
361
|
+
padding-top: 4px;
|
362
|
+
white-space: nowrap;
|
363
|
+
text-overflow: ellipsis;
|
364
|
+
overflow: hidden;
|
365
|
+
}
|
366
|
+
|
367
|
+
ul.quick-list li .meta-data-title,
|
368
|
+
table.quick-list td.meta-data-title {
|
369
|
+
display: inline-block;
|
370
|
+
min-width: 75px;
|
371
|
+
font-weight: bold;
|
372
|
+
}
|
373
|
+
|
374
|
+
ul.quick-list li span,
|
375
|
+
table.quick-list td {
|
376
|
+
line-height: 28px;
|
377
|
+
}
|
378
|
+
|
379
|
+
ul.quick-list li,
|
380
|
+
table.quick-list tr {
|
381
|
+
border-bottom: 1px solid #efefef;
|
382
|
+
padding: 0.5em 0;
|
383
|
+
}
|
384
|
+
|
385
|
+
ul.quick-list li:last-child,
|
386
|
+
table.quick-list tr:last-child {
|
387
|
+
border-bottom: none;
|
388
|
+
}
|
389
|
+
|
390
|
+
ul.quick-list li i {
|
391
|
+
padding-right: 10px;
|
392
|
+
color: #757679;
|
393
|
+
}
|
394
|
+
|
395
|
+
.screenshot{
|
396
|
+
max-height: 100%;
|
397
|
+
max-width: 100%;
|
398
|
+
}
|
399
|
+
|
400
|
+
/* Features / Scenarios */
|
401
|
+
ul.panel_toolbox li .step {
|
402
|
+
border-radius: 50%;
|
403
|
+
color: #ffffff;
|
404
|
+
display: block;
|
405
|
+
font-size: 14px;
|
406
|
+
height: 30px;
|
407
|
+
margin-right: 5px;
|
408
|
+
padding: 5px;
|
409
|
+
text-align: center;
|
410
|
+
width: 30px;
|
411
|
+
}
|
412
|
+
|
413
|
+
.scenario-step-container {
|
414
|
+
margin-bottom: 10px;
|
415
|
+
}
|
416
|
+
|
417
|
+
.scenario-step-container .label {
|
418
|
+
display: inline-block;
|
419
|
+
text-align: center;
|
420
|
+
width: 30px;
|
421
|
+
}
|
422
|
+
|
423
|
+
.scenario-step-container .text {
|
424
|
+
display: inline;
|
425
|
+
}
|
426
|
+
|
427
|
+
.scenario-step-container .duration {
|
428
|
+
position: relative;
|
429
|
+
float: right;
|
430
|
+
}
|
431
|
+
|
432
|
+
.scenario-step-container .text .keyword.highlight {
|
433
|
+
font-size: 1.2em;
|
434
|
+
font-weight: 700;
|
435
|
+
}
|
436
|
+
|
437
|
+
.scenario-scroll-bar {
|
438
|
+
overflow-x: scroll;
|
439
|
+
}
|
440
|
+
|
441
|
+
.scenario-step-collapse,
|
442
|
+
.scenario-scroll-bar .arguments {
|
443
|
+
margin-left: 30px;
|
444
|
+
width: auto;
|
445
|
+
}
|
446
|
+
|
447
|
+
/* media */
|
448
|
+
@media (max-width: 1200px) {
|
449
|
+
.x_title h2 {
|
450
|
+
width: 70%;
|
451
|
+
}
|
452
|
+
}
|
453
|
+
|
454
|
+
@media (max-width: 640px) {
|
455
|
+
.x_title h2 {
|
456
|
+
width: 100%;
|
457
|
+
}
|
458
|
+
}
|
459
|
+
|
460
|
+
/* override */
|
461
|
+
table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child:before,
|
462
|
+
table.dataTable.dtr-inline.collapsed > tbody > tr > th:first-child:before {
|
463
|
+
background-color: #1ABB9C;
|
464
|
+
}
|
465
|
+
|
466
|
+
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td:first-child:before, table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th:first-child:before {
|
467
|
+
background-color: #E74C3C;
|
468
|
+
}
|
469
|
+
|
470
|
+
.created-by {
|
471
|
+
padding: 50px 0;
|
472
|
+
text-align: center;
|
473
|
+
}
|
474
|
+
|
475
|
+
.x_title {
|
476
|
+
margin-top: 20px;
|
477
|
+
margin-bottom: 30px;
|
478
|
+
}
|
479
|
+
|
480
|
+
.feature-flow {
|
481
|
+
background-color: white;
|
482
|
+
margin-bottom: 30px;
|
483
|
+
-webkit-box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.07);
|
484
|
+
box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.07);
|
485
|
+
}
|
486
|
+
|
487
|
+
.feature-flow-content {
|
488
|
+
overflow-x: scroll;
|
489
|
+
}
|
490
|
+
|
491
|
+
/* Device List */
|
492
|
+
|
493
|
+
.ui-card {
|
494
|
+
background: #fff;
|
495
|
+
border: 1px solid #dfe5ef;
|
496
|
+
border-radius: 8px;
|
497
|
+
margin: 0 20px 20px 20px;
|
498
|
+
padding: 70px 5px 50px 10px;
|
499
|
+
-webkit-box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.07);
|
500
|
+
box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.07);
|
501
|
+
}
|
502
|
+
|
503
|
+
.ui-card:hover {
|
504
|
+
-webkit-box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.15);
|
505
|
+
box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.15);
|
506
|
+
}
|
507
|
+
|
508
|
+
.device-container {
|
509
|
+
width: 100%;
|
510
|
+
}
|
511
|
+
|
512
|
+
.ui-card {
|
513
|
+
text-align: center;
|
514
|
+
}
|
515
|
+
|
516
|
+
.device-os-icon i {
|
517
|
+
color: #324057;
|
518
|
+
font-size: 28px;
|
519
|
+
}
|
520
|
+
|
521
|
+
.device-title {
|
522
|
+
word-wrap: break-word;
|
523
|
+
font-size: 28px;
|
524
|
+
font-weight: 300;
|
525
|
+
color: #324057;
|
526
|
+
margin-top: 25px;
|
527
|
+
margin-bottom: 50px;
|
528
|
+
}
|
529
|
+
|
530
|
+
.device-info {
|
531
|
+
font-size: 14px;
|
532
|
+
font-weight: 300;
|
533
|
+
color: #8492a6;
|
534
|
+
margin-bottom: 10px;
|
535
|
+
word-wrap: break-word;
|
536
|
+
}
|
537
|
+
|
538
|
+
a {
|
539
|
+
text-decoration: none !important;
|
540
|
+
}
|
541
|
+
|
542
|
+
.result-btn {
|
543
|
+
margin-top: 35px;
|
544
|
+
}
|
545
|
+
|
546
|
+
.phone_container {
|
547
|
+
padding-top: 30px;
|
548
|
+
padding-bottom: 30px;
|
549
|
+
-webkit-box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.07);
|
550
|
+
box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.07);
|
551
|
+
}
|
552
|
+
|
553
|
+
.phone {
|
554
|
+
margin: 0 auto;
|
555
|
+
border: 15px solid #000000;
|
556
|
+
border-radius: 36px;
|
557
|
+
height: 270px;
|
558
|
+
width: 160px;
|
559
|
+
overflow: hidden;
|
560
|
+
}
|
561
|
+
|
562
|
+
.phone_image {
|
563
|
+
width: 100%;
|
564
|
+
height: 100%;
|
565
|
+
object-fit: scale-down;
|
566
|
+
}
|
567
|
+
</style>
|
568
|
+
|
569
|
+
<script src="./assets/js/d3.v3.min.js"></script>
|
570
|
+
<script src="./assets/js/first-sankey.js"></script>
|
571
|
+
<script src="./assets/js/d3.chart.min.js"></script>
|
572
|
+
<script src="./assets/js/sankey.js"></script>
|
573
|
+
<style>
|
574
|
+
#chart {
|
575
|
+
font: 13px sans-serif;
|
576
|
+
height: 500px;
|
577
|
+
}
|
578
|
+
.node rect {
|
579
|
+
fill-opacity: .9;
|
580
|
+
shape-rendering: crispEdges;
|
581
|
+
stroke-width: 0;
|
582
|
+
}
|
583
|
+
.link {
|
584
|
+
fill: none;
|
585
|
+
stroke: #000;
|
586
|
+
stroke-opacity: .2;
|
587
|
+
}
|
588
|
+
</style>
|
589
|
+
</head>
|
590
|
+
<body>
|
591
|
+
<div class="main_conainer">
|
592
|
+
<div class="container-fluid devices-list">
|
593
|
+
<div class="x_title">
|
594
|
+
<h2>Devices List</h2>
|
595
|
+
<div class="clearfix"></div>
|
596
|
+
</div>
|
597
|
+
<div class="row">
|
598
|
+
<% @devices.each do |device| %>
|
599
|
+
<div class="ui-card col-md-3">
|
600
|
+
<div class="container device-container">
|
601
|
+
<div class="row device-os-icon">
|
602
|
+
<i class="fa fa-android fa-lg"></i>
|
603
|
+
</div>
|
604
|
+
<div class="row device-title"><%= device['model'] %></div>
|
605
|
+
<div class="row device-info">ID - <%= device['id'] %></div>
|
606
|
+
<div class="row device-info">SDK Version - <%= device['sdk'] %></div>
|
607
|
+
<div class="row device-info">Screen Size - <%= "#{device['screen_height']}x#{device['screen_width']}" %></div>
|
608
|
+
<div class="row device-info result-btn">
|
609
|
+
<a href='<%= "./#{device['id']}/feature_report.html" %>'>See Results</a>
|
610
|
+
</div>
|
611
|
+
</div>
|
612
|
+
</div>
|
613
|
+
<% end %>
|
614
|
+
</div>
|
615
|
+
</div>
|
616
|
+
<% @features_report.values.each_with_index do |element, index| %>
|
617
|
+
<div class="container-fluid">
|
618
|
+
<div class="row">
|
619
|
+
<div class="x_title">
|
620
|
+
<h2 id="chart_row<%= index + 1 %>"></h2>
|
621
|
+
<div class="clearfix"></div>
|
622
|
+
</div>
|
623
|
+
</div>
|
624
|
+
<div class="row feature-flow">
|
625
|
+
<div id="chart<%= index + 1 %>"></div>
|
626
|
+
</div>
|
627
|
+
</div>
|
628
|
+
<% end %>
|
629
|
+
</div>
|
630
|
+
|
631
|
+
<script src="./assets/js/jquery-3.2.1.min.js" ></script>
|
632
|
+
<script src="./assets/js/bootstrap.min.js"></script>
|
633
|
+
<script>
|
634
|
+
d3.json("./assets/js/data.json", function(error, json) {
|
635
|
+
for(var i = 0; i < json.length; i++) {
|
636
|
+
let jsonObject = json[i];
|
637
|
+
let devicesSet = new Set([]);
|
638
|
+
let devicesHash = {};
|
639
|
+
for(var k = 0; k < jsonObject.links.length; k++) {
|
640
|
+
let link = jsonObject.links[k];
|
641
|
+
devicesSet.add(link.owner);
|
642
|
+
devicesHash[link.owner] = link.owner_model
|
643
|
+
}
|
644
|
+
devices = Array.from(devicesSet);
|
645
|
+
// GRAPH
|
646
|
+
var height = 150*(devices.length-1);
|
647
|
+
var c20c = d3.scale.category10();
|
648
|
+
d3.select("#chart_row" + (i+1))
|
649
|
+
.text(jsonObject["name"])
|
650
|
+
|
651
|
+
let chartId = "#chart" + (i+1);
|
652
|
+
var svg = d3.select(chartId)
|
653
|
+
.style("height", height + "px")
|
654
|
+
.append("svg");
|
655
|
+
|
656
|
+
var chart = svg.chart("Sankey.Path");
|
657
|
+
|
658
|
+
chart
|
659
|
+
.name(label)
|
660
|
+
.colorNodes(function(name, node) {
|
661
|
+
color = "#ff6961";
|
662
|
+
if(node.id == "empty") {
|
663
|
+
color = "#9f9fa3"
|
664
|
+
} else if(node.status === "passed") {
|
665
|
+
color = "#77dd77";
|
666
|
+
}
|
667
|
+
return color;
|
668
|
+
})
|
669
|
+
.colorLinks(function(link) {
|
670
|
+
return c20c(link.owner);
|
671
|
+
})
|
672
|
+
.nodeWidth(10)
|
673
|
+
.nodePadding(10)
|
674
|
+
.spread(true)
|
675
|
+
.draw(jsonObject);
|
676
|
+
|
677
|
+
// LEGEND
|
678
|
+
let legendRectSize = 10;
|
679
|
+
let legendSpacing = 10
|
680
|
+
|
681
|
+
var legend = svg
|
682
|
+
.append("g")
|
683
|
+
.selectAll("g")
|
684
|
+
.data(Object.keys(devicesHash))
|
685
|
+
.enter()
|
686
|
+
.append('g')
|
687
|
+
.attr('class', 'legend')
|
688
|
+
.attr('transform', function(d, i) {
|
689
|
+
var height = legendRectSize;
|
690
|
+
var x = 10;
|
691
|
+
var y = 10 + (i * height) + i*5;
|
692
|
+
return 'translate(' + x + ',' + y + ')';
|
693
|
+
});
|
694
|
+
|
695
|
+
legend.append('rect')
|
696
|
+
.attr('width', legendRectSize)
|
697
|
+
.attr('height', legendRectSize)
|
698
|
+
.style('fill', function(d) {
|
699
|
+
return c20c(d);
|
700
|
+
})
|
701
|
+
.style('opacity', .2)
|
702
|
+
|
703
|
+
legend.append('text')
|
704
|
+
.attr('x', legendRectSize + 5)
|
705
|
+
.attr('y', 10)
|
706
|
+
.text(function(d) { return devicesHash[d]; });
|
707
|
+
}
|
708
|
+
});
|
709
|
+
</script>
|
710
|
+
</body>
|
711
|
+
</html>
|