-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
237 lines (222 loc) · 15.8 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="description" content="POM Builder is a Chrome extension that helps you instantly generate robust element locators for your web elements. Those element locators can be used in all automation frameworks including Selenium, Protractor and TestArchitect.">
<meta name="twitter:card" value="POM Builder is a Chrome extension that helps you instantly generate robust element locators (XPath, CSS selector, ID, Name, etc.) for all test automation frameworks including Selenium, Protractor and TestArchitect.">
<meta name="keywords" content="Page object building,element locator,protractor test automation,selenium test automation,testarchitect test automation">
<meta name="robots" content="index,follow">
<meta property="og:title" content="POM Builder - Auto-generate element locators including XPath and CSS selector" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://www.pombuilder.com/" />
<meta property="og:image" content="https://www.pombuilder.com/img/banner.png" />
<meta property="og:description" content="POM Builder is a Chrome extension that helps you instantly generate robust element locators (XPath, CSS selector, ID, Name, etc.) for all test automation frameworks including Selenium, Protractor and TestArchitect." />
<meta property="og:site_name" content="POM Builder Homepage" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<title>POM Builder - Auto-generate element locators including XPath and CSS selector - Homepage</title>
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="script/index.js"></script>
<!-- Google Analytics -->
<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','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-124515002-2', 'auto');
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->
</head>
<body>
<nav class="navbar navbar-dark navbar-expand-md navbar-custome justify-content-end">
<a class="navbar-brand mr-auto " href="./index.html">
<img src="./img/logo.png" alt="logo" class="logo">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarPOM" aria-controls="navbarPOM" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse flex-grow-0 " id="navbarPOM">
<ul class="navbar-nav">
<li class="nav-item ml-auto text-center">
<a class="text-light" href="https://github.com/logigearcorporation/pombuilder/wiki/User-Guide">User Guide</a>
</li>
<li class="nav-item ml-auto text-center">
<a class="text-light" href="#contact-us">Contact Us</a>
</li>
<li class="nav-item ml-auto active">
<a class="btn btn-secondary addToChrome d-flex" target="_blank" href='https://chrome.google.com/webstore/detail/pombuilder-%E2%80%93-auto-generat/akcejfbfkkjnghlfngighgncolfaghco'>
<div class='m-auto'>Add to Chrome</div>
</a>
</li>
<li class="nav-item ml-auto active">
<a class="btn btn-secondary addToChrome d-flex" target="_blank" href="https://microsoftedge.microsoft.com/addons/detail/pom-builder-%E2%80%93-autogenera/kdgiddfmbapffpebgjkajbodhcicmkml">
<div class='m-auto'>Add to Edge</div>
</a>
</li>
</ul>
</div>
</nav>
<div class="container introduce-banner mw-100">
<div class="row ml-md-0 mr-md-0">
<div class="col-12 col-md-6 col-xl-5 pl-md-0 pr-md-0">
<div class="cut-down ml-md-0 mr-md-0 pr-md-5">
<div>
Cut down the time to find unique locators by half*
</div>
</div>
<div class="col-xl-10 pl-xl-0 description-introduce ml-md-0 mr-md-0 pl-md-0 pr-md-0 pr-md-5 pr-xl-3">
<div>
Instantly generates the most robust web element locator (XPath, CSS selector, ID, Name, etc.) for all test automation frameworks including Selenium, Protractor, TestArchitect Enterprise and TestArchitect Gondola.<br>
* Measurements were performed on long and complex XPath locators
</div>
</div>
<div class="row container-button-intro ml-md-0 mr-md-0 align-items-center">
<a target="_blank" href='https://chrome.google.com/webstore/detail/pombuilder-%E2%80%93-auto-generat/akcejfbfkkjnghlfngighgncolfaghco' class=" btn btn-secondary addToChrome d-flex">
<div class='m-auto'>
Add to Chrome
</div>
</a>
<div class="col-6 col-md-6 pr-0 pr-md-0 d-inline-flex text-right align-items-center play-acttion-container justify-content-md-end justify-content-xl-start">
<button type="button" class="btn h-100 play-acttion">
<span class="fa fa-play"></span>
</button>
<div for="btn-scroll-to-video">
See it in action
</div>
</div>
</div>
</div>
<div class="d-none d-md-inline col-md-6 col-xl-7 pl-md-4 pl-xl-0">
<img src="./img/banner.png" alt="banner" class="img-fluid banner">
</div>
</div>
</div>
<div class="container p-0 container-body">
<div class="col-12 col-md-12 bg-white feature-container text-center">
<div class="col-12 col-md-12 pl-0 pr-0 pt-3 pt-md-0 justify-content-center">
<div class="feature-logon">
A time-saving tool for building Page Objects
</div>
</div>
<div class="col-12 col-md-12 row m-0 mb-md-0 pl-0 pr-0 p-md-0">
<div class="col-12 col-md-4 col-xl-4 pl-md-0 pr-md-0 m-auto text-md-left text-xl-right">
<button type="button" id="btn-quick-copy" class="btn btn-default btn-feature">
Quick Copy
</button>
</div>
<div class="col-12 col-md-4 col-xl-4 pl-md-0 pr-md-0 m-auto text-md-center">
<button type="button" id="btn-smart-gen" class="btn btn-feature">
Smart Gen
</button>
</div>
<div class="col-12 col-md-4 col-xl-4 pl-md-0 pr-md-0 m-auto text-md-right text-xl-left">
<button id="btn-locator-test" type="button" class="btn btn-feature">
Locator Test
</button>
</div>
</div>
</div>
<div class="col-12 col-md-12 row ml-0 mr-0 mb-5 mb-md-0 p-0 justify-content-center text-center">
<div class="col-12 col-md-12 pl-0 pr-0 pt-3 pt-md-0 justify-content-center">
<div class="feature-logon">
Watch it action
</div>
</div>
<div class="row video-introduce-box justify-content-center align-items-center embed-responsive embed-responsive-16by9 " >
<iframe width="560" height="315" src="https://www.youtube.com/embed/sq2V2taS2o4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
<div class="row ml-0 mr-0" id="quick-copy-box">
<div class="col-12 col-md-12 pl-0 pr-0 pt-3 pt-md-0 justify-content-center">
<div class="feature-logon">
Key Features
</div>
</div>
<div class="col-12 col-xl-5 pl-0 pr-0 pb-3 mb-3 pb-md-0 mb-md-0 text-center text-xl-right m-xl-auto">
<img class="img-fluid example-1 m-auto my-lg-4 my-xl-auto" alt="Quickly copy the smartest locator using Quick Copy" src="./img/example1.gif" style="width:400px !important; height: 250px !important">
</div>
<div class="col-12 col-xl-6 pl-3 pr-3 pl-md-0 pr-md-0 content-quick-copy-container justify-content-center mx-xl-auto">
<div class="col-12 p-0 pb-2">
<div class="header-quick-copy">Quickly copy the smartest locator</div>
</div>
<div class="col-12 p-0">
<div class="content-quick-copy">Right click on your web element of interest,
then select <b>Quick Copy</b> > <b>Suggested Locator</b> to copy the smartest locator for that web element to clipboard.
<a href="https://github.com/logigearcorporation/pombuilder/wiki/User-Guide#quick-copy">Quick Copy</a> leverages Pattern Recognition to contextually guess the most reliable
and readable locator for you. Now you are free to paste it to any page object of your automation framework of choice such as <a href="https://www.seleniumhq.org">Selenium</a>, <a href="https://www.protractortest.org">Protractor</a>
and <a href="https://www.testarchitect.com">TestArchitect</a>.</div>
</div>
</div>
</div>
<div class="row pr-0 pl-0 ml-0 mg-0" id="smart-gen-box">
<div class="col-12 col-xl-5 order-xl-last p-0 mb-4 mb-md-0 text-center text-xl-left m-xl-auto">
<img class="img-fluid example-2 m-auto my-lg-4 my-xl-auto" alt="Get suggested element locators for your elements using Smart Gen" src="./img/example2.gif" style="width:400px !important; height: 250px !important">
</div>
<div class="col-12 col-xl-6 order-xl-first m-xl-auto pl-3 pr-3 pl-md-0 pr-md-0 flaky-locators-container">
<div class="flaky-locators-header mb-2 mb-md-3">Flaky locators result in unstable tests</div>
<div class="flaky-locators-content">If your element locators are too sensitive to changes like the absolute XPath on the right,
your tests will fail even due to minor GUI changes. But constructing reliable and unique locators manually is tedious and error-prone.
<a href="https://github.com/logigearcorporation/pombuilder/wiki/User-Guide#view-copy-and-paste-your-locator-on-the-pom-builder-tab">Smart Gen</a>
eliminates this hassle by auto-suggesting the smartest locators as well as excluding out bad ones for your reference.</div>
</div>
</div>
<div class="row col-xl-12 pl-0 pr-0 ml-0 mr-0" id="locator-test-box">
<div class="col-12 col-xl-5 p-0 mb-4 pr-2 mb-md-0 pr-md-0 text-center text-xl-right m-xl-auto">
<img class="img-fluid example-3 m-auto py-xl-0 my-lg-4 my-xl-auto" alt="Customize and test your element locators using Locator Test" src="./img/example3.gif" style="width:400px !important; height: 250px !important">
</div>
<div class="col-12 col-xl-6 pl-3 pr-3 mb-4 pl-md-0 pr-md-0 pl-xl-3 text-xl-center m-xl-auto">
<div class="customize-locator-header mb-3 mt-xl-0">Customize your locator and test it</div>
<div class="customize-locator-content">Our suggested element locator may perform well most of the time but in some cases, you might want to add your own touches.
That’s when <b>Locator Test</b> comes in handy. It helps you quickly evaluate the customized locator to make sure that it uniquely identifies your web element.
If your element locator is not unique like the one on the left, Locator Test shows you how many web elements match your locator so you can easily vet them out.
</div>
</div>
</div>
<div class="col-12 recieve-news-container text-center"></div>
<div class="col-12 text-center">
<a href="https://chrome.google.com/webstore/detail/pombuilder-%E2%80%93-auto-generat/akcejfbfkkjnghlfngighgncolfaghco"><img class="img-fluid chrome-store-badge" alt="chromestorebadge" src="./img/ChromeWebStore_Badge.png"></a>
</div>
<div class="col-12 recieve-news-container text-center">
</div>
</div>
<div class="container footer-pom-buider text-center mw-100">
<div class="row mr-0 ml-0">
<div class="col-12 col-md-6 col-xl-7 pl-0 pr-0 text-md-left">
<div class="col-12 mb-4">
<img class="img-fluid" alt="footer" src="./img/footer.png"/>
</div>
<div class="col-12 col-xl-10 mt-md-5 footer-content text-md-left">
The best tool to capture web element locators for Selenium, Protractor and TestArchitect testers with Smart Gen, Locator Test, POM Code Snippet and more...
</div>
<div class="col-12 p-0 footer-copy-right text-md-left">© 2020 POMBuilder. All rights reserved.</div>
</div>
<div class="d-none d-md-block col-md-6 col-xl-5 pr-md-4 contact-info" id="contact-us">
<div class="col-md-12 pl-md-0 pr-md-0 mb-md-4 contact-info-header">
<p>Contact Us</p>
</div>
<div class="mb-md-0">
<b>LogiGear Corporation</b>
<ul>
<li>1730 S. Amphlett Blvd. Suite 200, San Mateo, CA 94402, USA </li>
<li>+1 650 572 1400</li>
<li>[email protected]</li>
</ul>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>