Skip to content
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

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
118 changes: 118 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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,
Copy link
Member

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?

Copy link
Contributor Author

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.

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>,
Copy link
Member

Choose a reason for hiding this comment

The 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.

Copy link
Contributor Author

Choose a reason for hiding this comment

The 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>:
Expand Down Expand Up @@ -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>
Expand Down