Skip to content

Commit defb67b

Browse files
raju249raju249
authored
Add docs for CDP methods for JS (SeleniumHQ#623)[deploy site]
* Add js code for basic auth injection * Update url and add to translation * Add docs for dom mutation using cdp * Add docs for js exception events * Add docs for console.log events
1 parent 13e6234 commit defb67b

File tree

9 files changed

+1118
-0
lines changed

9 files changed

+1118
-0
lines changed

‎docs_source_files/content/support_packages/chrome_devtools.de.md

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -103,3 +103,128 @@ fun main() {
103103
{{< / code-tab >}}
104104

105105

106+
## Register Basic Auth:
107+
108+
Some applications require to keep some pages behind an auth and most of the time to keep things simple, a developer uses Basic Auth.
109+
With Selenium and devtools integration, you can automate the input of basic auth credentials whenever they arise.
110+
111+
{{< code-tab >}}
112+
{{< code-panel language="java" >}}
113+
# Please raise a PR to add code sample
114+
{{< / code-panel >}}
115+
{{< code-panel language="python" >}}
116+
# Please raise a PR to add code sample
117+
{{< / code-panel >}}
118+
{{< code-panel language="csharp" >}}
119+
# Please raise a PR to add code sample
120+
{{< / code-panel >}}
121+
{{< code-panel language="ruby" >}}
122+
# Please raise a PR to add code sample
123+
{{< / code-panel >}}
124+
{{< code-panel language="javascript" >}}
125+
const pageCdpConnection = await driver.createCDPConnection('page')
126+
127+
await driver.register('username', 'password', pageCdpConnection)
128+
await driver.get(server.url())
129+
{{< / code-panel >}}
130+
{{< code-panel language="kotlin" >}}
131+
# Please raise a PR to add code sample
132+
{{< / code-panel >}}
133+
{{< / code-tab >}}
134+
135+
## Listen to DOM events on a web page
136+
137+
Using Selenium's integration with CDP, one can listen to the DOM events and register callbacks to process the DOM event.
138+
139+
{{< code-tab >}}
140+
{{< code-panel language="java" >}}
141+
# Please raise a PR to add code sample
142+
{{< / code-panel >}}
143+
{{< code-panel language="python" >}}
144+
# Please raise a PR to add code sample
145+
{{< / code-panel >}}
146+
{{< code-panel language="csharp" >}}
147+
# Please raise a PR to add code sample
148+
{{< / code-panel >}}
149+
{{< code-panel language="ruby" >}}
150+
# Please raise a PR to add code sample
151+
{{< / code-panel >}}
152+
{{< code-panel language="javascript" >}}
153+
const cdpConnection = await driver.createCDPConnection('page')
154+
await driver.logMutationEvents(cdpConnection, function(event) {
155+
assert.equal(event['attribute_name'], 'style')
156+
assert.equal(event['current_value'], '')
157+
assert.equal(event['old_value'], 'display:none;')
158+
})
159+
160+
await driver.get(test.Pages.dynamicPage)
161+
162+
let element = driver.findElement({id: 'reveal'})
163+
await element.click()
164+
let revealed = driver.findElement({id: 'revealed'});
165+
await driver.wait(until.elementIsVisible(revealed), 5000);
166+
{{< / code-panel >}}
167+
{{< code-panel language="kotlin" >}}
168+
# Please raise a PR to add code sample
169+
{{< / code-panel >}}
170+
{{< / code-tab >}}
171+
172+
## Listen to JS Exceptions on a web page
173+
174+
Using Selenium's integration with CDP, one can listen to the JS Exceptions and register callbacks to process the exception details.
175+
176+
{{< code-tab >}}
177+
{{< code-panel language="java" >}}
178+
# Please raise a PR to add code sample
179+
{{< / code-panel >}}
180+
{{< code-panel language="python" >}}
181+
# Please raise a PR to add code sample
182+
{{< / code-panel >}}
183+
{{< code-panel language="csharp" >}}
184+
# Please raise a PR to add code sample
185+
{{< / code-panel >}}
186+
{{< code-panel language="ruby" >}}
187+
# Please raise a PR to add code sample
188+
{{< / code-panel >}}
189+
{{< code-panel language="javascript" >}}
190+
const cdpConnection = await driver.createCDPConnection('page')
191+
await driver.onLogException(cdpConnection, function(event) {
192+
assert.equal(event['exceptionDetails']['stackTrace']['callFrames'][0]['functionName'], 'onmouseover')
193+
})
194+
await driver.get(test.Pages.javascriptPage)
195+
let element = driver.findElement({id: 'throwing-mouseover'})
196+
await element.click()
197+
{{< / code-panel >}}
198+
{{< code-panel language="kotlin" >}}
199+
# Please raise a PR to add code sample
200+
{{< / code-panel >}}
201+
{{< / code-tab >}}
202+
203+
## Listen to console.log events on a web page
204+
205+
Using Selenium's integration with CDP, one can listen to the `console.log` events and register callbacks to process the event.
206+
207+
{{< code-tab >}}
208+
{{< code-panel language="java" >}}
209+
# Please raise a PR to add code sample
210+
{{< / code-panel >}}
211+
{{< code-panel language="python" >}}
212+
# Please raise a PR to add code sample
213+
{{< / code-panel >}}
214+
{{< code-panel language="csharp" >}}
215+
# Please raise a PR to add code sample
216+
{{< / code-panel >}}
217+
{{< code-panel language="ruby" >}}
218+
# Please raise a PR to add code sample
219+
{{< / code-panel >}}
220+
{{< code-panel language="javascript" >}}
221+
const cdpConnection = await driver.createCDPConnection('page')
222+
await driver.onLogEvent(cdpConnection, function(event) {
223+
assert.equal(event['args'][0]['value'], 'here')
224+
})
225+
await driver.executeScript('console.log("here")')
226+
{{< / code-panel >}}
227+
{{< code-panel language="kotlin" >}}
228+
# Please raise a PR to add code sample
229+
{{< / code-panel >}}
230+
{{< / code-tab >}}

‎docs_source_files/content/support_packages/chrome_devtools.en.md

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -96,4 +96,128 @@ fun main() {
9696
{{< / code-panel >}}
9797
{{< / code-tab >}}
9898

99+
## Register Basic Auth:
99100

101+
Some applications require to keep some pages behind an auth and most of the time to keep things simple, a developer uses Basic Auth.
102+
With Selenium and devtools integration, you can automate the input of basic auth credentials whenever they arise.
103+
104+
{{< code-tab >}}
105+
{{< code-panel language="java" >}}
106+
# Please raise a PR to add code sample
107+
{{< / code-panel >}}
108+
{{< code-panel language="python" >}}
109+
# Please raise a PR to add code sample
110+
{{< / code-panel >}}
111+
{{< code-panel language="csharp" >}}
112+
# Please raise a PR to add code sample
113+
{{< / code-panel >}}
114+
{{< code-panel language="ruby" >}}
115+
# Please raise a PR to add code sample
116+
{{< / code-panel >}}
117+
{{< code-panel language="javascript" >}}
118+
const pageCdpConnection = await driver.createCDPConnection('page')
119+
120+
await driver.register('username', 'password', pageCdpConnection)
121+
await driver.get(server.url())
122+
{{< / code-panel >}}
123+
{{< code-panel language="kotlin" >}}
124+
# Please raise a PR to add code sample
125+
{{< / code-panel >}}
126+
{{< / code-tab >}}
127+
128+
## Listen to DOM events on a web page
129+
130+
Using Selenium's integration with CDP, one can listen to the DOM events and register callbacks to process the DOM event.
131+
132+
{{< code-tab >}}
133+
{{< code-panel language="java" >}}
134+
# Please raise a PR to add code sample
135+
{{< / code-panel >}}
136+
{{< code-panel language="python" >}}
137+
# Please raise a PR to add code sample
138+
{{< / code-panel >}}
139+
{{< code-panel language="csharp" >}}
140+
# Please raise a PR to add code sample
141+
{{< / code-panel >}}
142+
{{< code-panel language="ruby" >}}
143+
# Please raise a PR to add code sample
144+
{{< / code-panel >}}
145+
{{< code-panel language="javascript" >}}
146+
const cdpConnection = await driver.createCDPConnection('page')
147+
await driver.logMutationEvents(cdpConnection, function(event) {
148+
assert.equal(event['attribute_name'], 'style')
149+
assert.equal(event['current_value'], '')
150+
assert.equal(event['old_value'], 'display:none;')
151+
})
152+
153+
await driver.get(test.Pages.dynamicPage)
154+
155+
let element = driver.findElement({id: 'reveal'})
156+
await element.click()
157+
let revealed = driver.findElement({id: 'revealed'});
158+
await driver.wait(until.elementIsVisible(revealed), 5000);
159+
{{< / code-panel >}}
160+
{{< code-panel language="kotlin" >}}
161+
# Please raise a PR to add code sample
162+
{{< / code-panel >}}
163+
{{< / code-tab >}}
164+
165+
## Listen to JS Exceptions on a web page
166+
167+
Using Selenium's integration with CDP, one can listen to the JS Exceptions and register callbacks to process the exception details.
168+
169+
{{< code-tab >}}
170+
{{< code-panel language="java" >}}
171+
# Please raise a PR to add code sample
172+
{{< / code-panel >}}
173+
{{< code-panel language="python" >}}
174+
# Please raise a PR to add code sample
175+
{{< / code-panel >}}
176+
{{< code-panel language="csharp" >}}
177+
# Please raise a PR to add code sample
178+
{{< / code-panel >}}
179+
{{< code-panel language="ruby" >}}
180+
# Please raise a PR to add code sample
181+
{{< / code-panel >}}
182+
{{< code-panel language="javascript" >}}
183+
const cdpConnection = await driver.createCDPConnection('page')
184+
await driver.onLogException(cdpConnection, function(event) {
185+
assert.equal(event['exceptionDetails']['stackTrace']['callFrames'][0]['functionName'], 'onmouseover')
186+
})
187+
await driver.get(test.Pages.javascriptPage)
188+
let element = driver.findElement({id: 'throwing-mouseover'})
189+
await element.click()
190+
{{< / code-panel >}}
191+
{{< code-panel language="kotlin" >}}
192+
# Please raise a PR to add code sample
193+
{{< / code-panel >}}
194+
{{< / code-tab >}}
195+
196+
## Listen to console.log events on a web page
197+
198+
Using Selenium's integration with CDP, one can listen to the `console.log` events and register callbacks to process the event.
199+
200+
{{< code-tab >}}
201+
{{< code-panel language="java" >}}
202+
# Please raise a PR to add code sample
203+
{{< / code-panel >}}
204+
{{< code-panel language="python" >}}
205+
# Please raise a PR to add code sample
206+
{{< / code-panel >}}
207+
{{< code-panel language="csharp" >}}
208+
# Please raise a PR to add code sample
209+
{{< / code-panel >}}
210+
{{< code-panel language="ruby" >}}
211+
# Please raise a PR to add code sample
212+
{{< / code-panel >}}
213+
{{< code-panel language="javascript" >}}
214+
const cdpConnection = await driver.createCDPConnection('page')
215+
await driver.onLogEvent(cdpConnection, function(event) {
216+
assert.equal(event['args'][0]['value'], 'here')
217+
})
218+
await driver.executeScript('console.log("here")')
219+
{{< / code-panel >}}
220+
{{< code-panel language="kotlin" >}}
221+
# Please raise a PR to add code sample
222+
{{< / code-panel >}}
223+
{{< / code-tab >}}

‎docs_source_files/content/support_packages/chrome_devtools.es.md

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -102,4 +102,128 @@ fun main() {
102102
{{< / code-panel >}}
103103
{{< / code-tab >}}
104104

105+
## Register Basic Auth:
105106

107+
Some applications require to keep some pages behind an auth and most of the time to keep things simple, a developer uses Basic Auth.
108+
With Selenium and devtools integration, you can automate the input of basic auth credentials whenever they arise.
109+
110+
{{< code-tab >}}
111+
{{< code-panel language="java" >}}
112+
# Please raise a PR to add code sample
113+
{{< / code-panel >}}
114+
{{< code-panel language="python" >}}
115+
# Please raise a PR to add code sample
116+
{{< / code-panel >}}
117+
{{< code-panel language="csharp" >}}
118+
# Please raise a PR to add code sample
119+
{{< / code-panel >}}
120+
{{< code-panel language="ruby" >}}
121+
# Please raise a PR to add code sample
122+
{{< / code-panel >}}
123+
{{< code-panel language="javascript" >}}
124+
const pageCdpConnection = await driver.createCDPConnection('page')
125+
126+
await driver.register('username', 'password', pageCdpConnection)
127+
await driver.get(server.url())
128+
{{< / code-panel >}}
129+
{{< code-panel language="kotlin" >}}
130+
# Please raise a PR to add code sample
131+
{{< / code-panel >}}
132+
{{< / code-tab >}}
133+
134+
## Listen to DOM events on a web page
135+
136+
Using Selenium's integration with CDP, one can listen to the DOM events and register callbacks to process the DOM event.
137+
138+
{{< code-tab >}}
139+
{{< code-panel language="java" >}}
140+
# Please raise a PR to add code sample
141+
{{< / code-panel >}}
142+
{{< code-panel language="python" >}}
143+
# Please raise a PR to add code sample
144+
{{< / code-panel >}}
145+
{{< code-panel language="csharp" >}}
146+
# Please raise a PR to add code sample
147+
{{< / code-panel >}}
148+
{{< code-panel language="ruby" >}}
149+
# Please raise a PR to add code sample
150+
{{< / code-panel >}}
151+
{{< code-panel language="javascript" >}}
152+
const cdpConnection = await driver.createCDPConnection('page')
153+
await driver.logMutationEvents(cdpConnection, function(event) {
154+
assert.equal(event['attribute_name'], 'style')
155+
assert.equal(event['current_value'], '')
156+
assert.equal(event['old_value'], 'display:none;')
157+
})
158+
159+
await driver.get(test.Pages.dynamicPage)
160+
161+
let element = driver.findElement({id: 'reveal'})
162+
await element.click()
163+
let revealed = driver.findElement({id: 'revealed'});
164+
await driver.wait(until.elementIsVisible(revealed), 5000);
165+
{{< / code-panel >}}
166+
{{< code-panel language="kotlin" >}}
167+
# Please raise a PR to add code sample
168+
{{< / code-panel >}}
169+
{{< / code-tab >}}
170+
171+
## Listen to JS Exceptions on a web page
172+
173+
Using Selenium's integration with CDP, one can listen to the JS Exceptions and register callbacks to process the exception details.
174+
175+
{{< code-tab >}}
176+
{{< code-panel language="java" >}}
177+
# Please raise a PR to add code sample
178+
{{< / code-panel >}}
179+
{{< code-panel language="python" >}}
180+
# Please raise a PR to add code sample
181+
{{< / code-panel >}}
182+
{{< code-panel language="csharp" >}}
183+
# Please raise a PR to add code sample
184+
{{< / code-panel >}}
185+
{{< code-panel language="ruby" >}}
186+
# Please raise a PR to add code sample
187+
{{< / code-panel >}}
188+
{{< code-panel language="javascript" >}}
189+
const cdpConnection = await driver.createCDPConnection('page')
190+
await driver.onLogException(cdpConnection, function(event) {
191+
assert.equal(event['exceptionDetails']['stackTrace']['callFrames'][0]['functionName'], 'onmouseover')
192+
})
193+
await driver.get(test.Pages.javascriptPage)
194+
let element = driver.findElement({id: 'throwing-mouseover'})
195+
await element.click()
196+
{{< / code-panel >}}
197+
{{< code-panel language="kotlin" >}}
198+
# Please raise a PR to add code sample
199+
{{< / code-panel >}}
200+
{{< / code-tab >}}
201+
202+
## Listen to console.log events on a web page
203+
204+
Using Selenium's integration with CDP, one can listen to the `console.log` events and register callbacks to process the event.
205+
206+
{{< code-tab >}}
207+
{{< code-panel language="java" >}}
208+
# Please raise a PR to add code sample
209+
{{< / code-panel >}}
210+
{{< code-panel language="python" >}}
211+
# Please raise a PR to add code sample
212+
{{< / code-panel >}}
213+
{{< code-panel language="csharp" >}}
214+
# Please raise a PR to add code sample
215+
{{< / code-panel >}}
216+
{{< code-panel language="ruby" >}}
217+
# Please raise a PR to add code sample
218+
{{< / code-panel >}}
219+
{{< code-panel language="javascript" >}}
220+
const cdpConnection = await driver.createCDPConnection('page')
221+
await driver.onLogEvent(cdpConnection, function(event) {
222+
assert.equal(event['args'][0]['value'], 'here')
223+
})
224+
await driver.executeScript('console.log("here")')
225+
{{< / code-panel >}}
226+
{{< code-panel language="kotlin" >}}
227+
# Please raise a PR to add code sample
228+
{{< / code-panel >}}
229+
{{< / code-tab >}}

0 commit comments

Comments
 (0)