-
Notifications
You must be signed in to change notification settings - Fork 197
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Proposing a get endpoint for Take Screenshot that with fullpage option #1536
base: master
Are you sure you want to change the base?
Changes from 2 commits
f37036b
e134c44
16a640d
1a802aa
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -1016,6 +1016,12 @@ <h3>Endpoints</h3> | |
<td><a>Take Element Screenshot</a></td> | ||
</tr> | ||
|
||
<tr> | ||
<td>GET</td> | ||
<td>/session/{<var>session id</var>}/screenshot/full</td> | ||
<td><a>Take Fullpage Screenshot</a></td> | ||
</tr> | ||
|
||
<tr> | ||
<td>POST</td> | ||
<td>/session/{<var>session id</var>}/print</td> | ||
|
@@ -9035,6 +9041,74 @@ <h2>Screen capture</h2> | |
and a <a>command</a> <a>Take Element Screenshot</a> | ||
for doing the same with the visible region of an <a>element</a>’s | ||
<a>bounding rectangle</a> after it has been <a>scrolled into view</a>. | ||
It also provides a <a>Take Fullpage Screenshot</a> <a>command</a> | ||
to optionally capture the <a>fullpage region</a>. | ||
|
||
<p>An <a>element</a>’s <dfn data-lt="fullpage region">fullpage region</dfn> | ||
is the rendered rectangle that encompasses the maximal scrollable width | ||
and height, | ||
it can be calculated this way: | ||
<ol> | ||
<li><p>Let <var>x</var> be 0 | ||
|
||
<li><p>Let <var>y</var> be 0 | ||
|
||
<li><p>Let <var>width</var> be the value | ||
returned by | ||
<p><a>max</a>(document.body.scrollWidth, document.documentElement.scrollWidth, | ||
document.body.offsetWidth, document.documentElement.offsetWidth, | ||
document.body.clientWidth, document.documentElement.clientWidth) | ||
|
||
<li><p>Let <var>height</var> be the value | ||
returned by | ||
<p><a>max</a>(document.body.scrollHeight, document.documentElement.scrollHeight, | ||
document.body.offsetHeight, document.documentElement.offsetHeight, | ||
document.body.clientHeight, document.documentElement.clientHeight) | ||
|
||
<li><p>Return {<var>x</var>, <var>y</var>, <var>width</var>, <var>height</var>}. | ||
</ol> | ||
|
||
<p>In order to <dfn>draw a bounding box from the fullpage region</dfn>, | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Could this just reuse the "draw a bounding box from the framebuffer" steps? It seems to be mostly duplicated. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. The definition of "draw a bounding box from the framebuffer" uses initial viewport to define the width and height of the paint which is not the case here since we want the width and height of the entire page instead of just visible area. |
||
given a <a>rectangle</a>: | ||
|
||
<ol> | ||
<li><p>If either the <a>rectangle</a>’s width or height | ||
is 0 <a>CSS pixels</a>, | ||
return <a>error</a> with <a>error code</a> <a>unable to capture screen</a>. | ||
|
||
<li><p>Let <var>paint width</var> be the <a>rectangle</a>’s width | ||
|
||
<li><p>Let <var>paint height</var> be the <a>rectangle</a>’s height | ||
|
||
<li><p>Let <var>canvas</var> be a new <a><code>canvas</code> element</a>, | ||
and set its <a data-lt="canvas width attribute">width</a> | ||
and <a data-lt="canvas height attribute">height</a> | ||
to <var>paint width</var> and <var>paint height</var>, respectively. | ||
|
||
<li><p>Let <var>context</var>, a <a>canvas context mode</a>, | ||
be the result of invoking the <a>2D context creation algorithm</a> | ||
given <var>canvas</var> as the target. | ||
|
||
<li><p>Complete implementation specific steps equivalent to | ||
drawing the region of the framebuffer | ||
specified by the following coordinates onto <var>context</var>: | ||
|
||
<dl> | ||
<dt>X coordinate | ||
<dd><a>rectangle x coordinate</a> | ||
|
||
<dt>Y coordinate | ||
<dd><a>rectangle y coordinate</a> | ||
|
||
<dt>Width | ||
<dd><var>paint width</var> | ||
|
||
<dt>Height | ||
<dd><var>paint height</var> | ||
</dl> | ||
|
||
<li><p>Return <a>success</a> with <var>canvas</var>. | ||
</ol> | ||
|
||
<p>In order to <dfn>draw a bounding box from the framebuffer</dfn>, | ||
given a <a>rectangle</a>: | ||
|
@@ -9215,6 +9289,50 @@ <h3><dfn>Take Element Screenshot</dfn></h3> | |
<li><p>Return <a>success</a> with data <var>encoded string</var>. | ||
</ol> | ||
</section> <!-- /Take Element Screenshot --> | ||
|
||
<section> | ||
<h3><dfn>Take Fullpage Screenshot</dfn></h3> | ||
|
||
<table class="simple jsoncommand"> | ||
<tr> | ||
<th>HTTP Method</th> | ||
<th>URI Template</th> | ||
</tr> | ||
<tr> | ||
<td>GET</td> | ||
<td>/session/{<var>session id</var>}/screenshot/full</td> | ||
</tr> | ||
</table> | ||
|
||
<p>The <a>remote end steps</a> are: | ||
|
||
<ol> | ||
<li><p>If the <a>current top-level browsing context</a> is <a>no longer open</a>, | ||
return <a>error</a> with <a>error code</a> <a>no such window</a>. | ||
|
||
<li><p>When the user agent is next to <a>run the animation frame callbacks</a>: | ||
<ol> | ||
|
||
<li><p>Let <var>content rect</var> be the <a>current top-level browsing context</a>’s | ||
<a>document element</a>’s <a>fullpage region</a>. | ||
|
||
<li><p>Let <var>screenshot result</var> be the result of <a>trying</a> to call | ||
<a>draw a bounding box from the fullpage region</a>, | ||
given <var>content rect</var> as an argument. | ||
|
||
<li><p>Let <var>canvas</var> be a <a><code>canvas</code> element</a> | ||
of <var>screenshot result</var>’s data. | ||
|
||
<li><p>Let <var>encoding result</var> be the result of <a>trying</a> | ||
<a>encoding a canvas as Base64</a> <var>canvas</var>. | ||
|
||
<li><p>Let <var>encoded string</var> be <var>encoding result</var>’s data. | ||
</ol> | ||
|
||
<li><p>Return <a>success</a> with data <var>encoded string</var>. | ||
</ol> | ||
|
||
</section> <!-- /Take Screenshot with option --> | ||
</section> <!-- /Screen capture --> | ||
|
||
<section> | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Are there really no defined relations that enforce an ordering between any of these properties?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I am not sure what you mean regarding ordering of the properties. I took this "heuristics" from https://javascript.info/size-and-scroll-window. In reality, ChromeDriver implementation will probably utilize CDP https://chromedevtools.github.io/devtools-protocol/tot/Page/#method-getLayoutMetrics and use the contentSize width and height directly.