405 Commits

Author SHA1 Message Date
Pavel Feldman
0c8b2a7c32
chore: take snapshot tab apart (#32756) 2024-09-23 15:51:15 -07:00
Dmitry Gozman
b3a82bef46
feat: do not record route calls in the trace (#32723)
These are represented in the network pane instead.
2024-09-21 10:17:59 -07:00
Pavel Feldman
17ed944a84
chore: iterate towards recording into trace (4) (#32743) 2024-09-20 16:56:05 -07:00
Pavel Feldman
418d1c0c55
chore: allow starting recorder in traceviewer (#32741) 2024-09-20 15:25:49 -07:00
Pavel Feldman
dfb3fdf217
chore: iterate towards recording into trace (3) (#32718) 2024-09-20 13:08:33 -07:00
Max Schmitt
4c31a8289f
feat(trace-viewer): add network requests 'copy as cURL' button (#32627) 2024-09-18 14:35:11 +02:00
Pavel Feldman
355c88f48f
chore: iterate towards recording into trace (#32646) 2024-09-17 18:26:44 -07:00
Yury Semikhatsky
ad70e7a783
fix(trace-viewer): time delta between local and remote actions (#32661) 2024-09-17 11:14:15 -07:00
Pavel Feldman
3bff7b6ab1
chore: preserve selected trace action in live trace (#32630) 2024-09-16 17:33:52 -07:00
Pavel Feldman
7e3348eb0e
chore: recorder is trace viewer experiment (#32598) 2024-09-12 13:39:44 -07:00
Simon Knott
c9f3eb158e
feat(ui): highlight output toggle button if terminal contains error (#32392)
Closes https://github.com/microsoft/playwright/issues/32368

<img width="412" alt="Screenshot 2024-08-30 at 13 22 39"
src="https://github.com/user-attachments/assets/76cadcd9-e92a-44d9-80fc-b4e04702e71e">
2024-09-12 19:40:40 +02:00
Teng Yang
6a0009f9ed
fix(trace-viewer): fix ui issue on network request details (#32553) 2024-09-12 12:26:51 +02:00
Dmitry Gozman
7335fa602c
fix(trace viewer): do not show multiple action points in iframes (#32537)
When action has an input target, we assume there is a target element in
one of the frames and show action point in its center.

Fixes #32453.
2024-09-11 03:04:03 -07:00
Dmitry Gozman
b5d968fa0e
chore: make ReporterV2 a partial interface (#32532)
This makes it easier to write reporters by avoding empty methods.
2024-09-10 06:08:54 -07:00
Simon Knott
ec40890fd8
fix(tracing): use page swap timestamp to find closest screenshot (#32512)
Follow-up to https://github.com/microsoft/playwright/pull/32248. When we
have it, we should use the page swap timestamp we get from Chromium to
find the closest screenshot.
2024-09-10 14:32:33 +02:00
Max Schmitt
4b5422a3c7
fix(ui-mode): use server side path separator (#32523)
Fixes https://github.com/microsoft/playwright/issues/32323
2024-09-09 22:07:28 +02:00
Simon Knott
31e269ad06
feat(trace-viewer): show screenshot pointer (#32514)
Follow-up to https://github.com/microsoft/playwright/pull/32248. Adds a
glowing red circle that shows the click position. I made it glowing to
show that its position is inaccurate.
<img width="964" alt="Screenshot 2024-09-09 at 11 33 45"
src="https://github.com/user-attachments/assets/1903071d-6dc0-46c7-9951-844e49a51f35">
2024-09-09 14:00:22 +02:00
Simon Knott
3fe1263643
feat(trace viewer): show Screenshot instead of Snapshot (#32248)
Closes https://github.com/microsoft/playwright/issues/23964.

Trace snapshots are a best-effort snapshots of the browser DOM, but we
can't guarantee them to be exactly what the browser showed. One example
of this is `canvas` elements, where you just can't see their contents.
That makes snapshots useful, but not perfect.

For those cases where the snapshot doesn't show everything, this PR
introduces a new setting to show a screenshot instead. You won't be able
to scroll or inspect the DOM or select a locator anymore. But if the
snapshot was missing something, or displaying something wrong, you can
now check the screenshot instead.
2024-09-06 16:24:33 +02:00
Kuba Janik
ee91bdc585
feat(ui-mode): display list of query params in request tab (#32443) 2024-09-04 07:54:44 -07:00
Dmitry Gozman
d7393f998e
chore: simplify settings management in UI mode (#32440) 2024-09-04 01:05:07 -07:00
Simon Knott
b3d767fa14
fix(trace viewer): fix memory leak (#32379)
In the `visit` method, we currently cache the rendered HTML for every
walked node. This re-use works well for traces that consist mostly of
references to earlier snapshots.
But for traces that don't share much, this is a large memory overhead
and leads to the memory crash documented in
https://github.com/microsoft/playwright/issues/32336. For the algocracks
amongst you, the current memory usage for an html tree $h$ is
$\mathcal{O}(|h| * \text{height}(h))$.

This PR removes that cache from the nodes and replaces it with a
snapshot-level cache, fixing the memory crash.
Traces *without* reference should not see a performance impact from
this.
Traces *with* references will have slower initial rendering, but
re-rendering maintains speed because of the snapshot-level cache.

Closes https://github.com/microsoft/playwright/issues/32336

---------

Signed-off-by: Simon Knott <info@simonknott.de>
Co-authored-by: Max Schmitt <max@schmitt.mx>
2024-09-04 09:57:15 +02:00
Kuba Janik
a6b320e362
fix(ui-mode): format request body when headers are lower case (#32395)
Resolves https://github.com/microsoft/playwright/issues/32396

Currently, the request body is not formatted when content type header is
lower case (`content-type`). Even though the value is
`application/json`.

It happens because we are looking only for `Content-Type` header
ignoring headers that are lower case.

<img width="674" alt="363197933-5178ec23-b9cf-46b5-8284-e8d4d730b036"
src="https://github.com/user-attachments/assets/0ef01b52-7dd8-4f33-b836-9adb86f94cc9">
2024-08-30 16:21:51 +02:00
Simon Knott
ed5c21b827
fix(ui): respect --output param (#32351)
Closes https://github.com/microsoft/playwright/issues/32331

We're already passing the `outputDir` param to the UI, but the UI isn't
passing it back to the TestServer. This PR fixes that. I've added it to
`listTests`, which is requires to that
`TestServerDispatcher#_ignoredProjectOutputs` is populated with the
correct output dir. And i've added it to `runGlobalSetup`, which is what
the bug report was about.
2024-08-30 08:29:49 +02:00
Pavel Feldman
74a8e59096
chore: allow recorder rewrite annotations (#32381) 2024-08-29 14:16:01 -07:00
Pavel Feldman
bc87467b25
chore: generate simple dom descriptions in codegen (#32333) 2024-08-27 11:52:14 -07:00
Pavel Feldman
9d86bc5336
fix(dupe): render dupe test error indicator (#32303)
Fixes https://github.com/microsoft/playwright/issues/32093
2024-08-23 14:33:37 -07:00
Simon Knott
3fb33e7144
chore(ui): decouple TestServerConnection from websocket transport (#32274)
Preparation for https://github.com/microsoft/playwright/issues/32076.
2024-08-23 14:58:34 +02:00
Simon Knott
850436c656
chore(ui): move TeleSuiteUpdater into testIsomorphic (#32273)
Preparation for https://github.com/microsoft/playwright/issues/32076.
2024-08-22 17:29:10 +02:00
Simon Knott
b599335404
chore(ui): enable react/recommended lint rules (#32214)
Closes https://github.com/microsoft/playwright/issues/32159. I
originally set out to enable Strict Mode for our React UI, but found a
way better thing: Enabling the lint rules we had already installed!

`eslint-plugin-react` is already in of our `package.json`, and this PR
enables it and fixes some of the reported issues. Most of them are
around the `key` prop which is mostly about performance, but there's
also fixes for misspelled `data-testid` props.
2024-08-20 14:16:28 +02:00
Kuba Janik
f7e0bd3098
feat(ui-mode): add font preview to network tab (#32209)
Resolves https://github.com/microsoft/playwright/issues/32218

Currently, fonts are displayed as a raw binary file which does not give
any information to the users.
I replaced it with a simple font preview similar to the one found in the
dev tools of web browsers.
It is not a major feature but I think it is a nice addition and it might
be useful to somebody.

<img width="1043" alt="Screenshot 2024-08-17 at 18 33 46"
src="https://github.com/user-attachments/assets/a6cc7b57-7ea8-4a54-869d-57a44712597b">


https://github.com/user-attachments/assets/e52d9a72-fb2c-43c7-bfee-3d6d6edc6b6a
2024-08-20 08:28:02 +02:00
Dmitry Gozman
5271c26af1
fix(trace viewer): do not serve resources with x-unknown content type (#32219)
`x-unknown` is used as a placeholder for "no content-type" in the har.
We should not send it to the browser, because it is meaningfully
different from not sending `Content-Type` header. For example, Chromium
refuses to interpret stylesheets served with `x-unknown` content type.

Fixes https://github.com/microsoft/playwright-java/issues/1651.
2024-08-19 10:29:51 -07:00
Rui Figueira
b2ccfc3d01
chore(trace-viewer): support opening a source location in embedded trace viewer (#32175)
Related: https://github.com/microsoft/playwright-vscode/pull/513
2024-08-15 14:13:11 -07:00
Simon Knott
c8cc4f9c8b
chore(ui): update to react 18 (#32079)
Part of https://github.com/microsoft/playwright/issues/31863. Updates
most of our React usage to React 18. `recorder` doesn't seem to like it
yet. I suspect that some of our code isn't compatible with concurrent
mode, i've investigated that in
https://github.com/microsoft/playwright/pull/32101.

---------

Signed-off-by: Simon Knott <info@simonknott.de>
Co-authored-by: Max Schmitt <max@schmitt.mx>
2024-08-12 13:50:11 +02:00
Dmitry Gozman
44445e30e5
fix(ui mode): make sure key for attachment view is unique (#32084)
Fixes #32052.
2024-08-08 10:57:44 -07:00
Pavel Feldman
80e014f4b6
chore: sources tab render polish (#32055) 2024-08-08 10:53:59 -07:00
Simon Knott
17bb36a7fe
fix(ui): reset higlighted action on keyboard navigation (#32051)
Closes https://github.com/microsoft/playwright/issues/32050

When keyboarding through the action view, the UI continues showing the
hovered action. This makes keyboard nav hard to use.

The fix is to reset the higlighted action on keyboard navigation. This
is what we do when the mouse pointer leaves an action, and what I think
is reasonable.
2024-08-08 10:06:36 +02:00
Kuba Janik
7ec3a93db3
feat(ui-mode): add filters to network tab (#31956) 2024-08-06 14:52:35 -07:00
Max Schmitt
613ccb8d5b
chore(client-certificates): rewrite error for unsupported PFX errors (#32008) 2024-08-05 14:42:29 +02:00
Max Schmitt
dbc4bc84d6
fix(trace-viewer): popup snapshot utf-8 support (#32006) 2024-08-05 09:11:31 +02:00
Yury Semikhatsky
5a83fe55bc
chore(trace-viewer): hide status code field for failed request (#31977)
* Hide 'Status Code:' field for interrupted requests that don't have it.
* Clear up previously selected body when showing aborted requests.
* Highlight interrupted requests in red.
2024-08-01 17:26:52 -07:00
Max Schmitt
69561a194a
fix(trace-viewer): make 'hide route actions' work for .NET (#31961) 2024-08-01 21:02:47 +02:00
Dmitry Gozman
a541751657
feat(ui mode): linkify attachment names and content (#31960)
- Pass `contentType` to the CodeMirror.
- Support `text/markdown` mode.
- Custom mode for non-supported types that linkifies urls.
2024-08-01 09:27:45 -07:00
Dmitry Gozman
bbe252a3d7
fix(ui mode): api review feedback (#31952)
- Hide "Testing Options" as not ready.
- Update SettingsView margins.
- Include `page.route` and similar methods into "Show route actions".
2024-08-01 05:36:19 -07:00
Yury Semikhatsky
47714d6559
feat(ui-mode): add annotations tab (#31945)
<img width="867" alt="image"
src="https://github.com/user-attachments/assets/7d714723-1d3f-49b2-944a-0a476d79aee8">

---------

Signed-off-by: Dmitry Gozman <dgozman@gmail.com>
Co-authored-by: Dmitry Gozman <dgozman@gmail.com>
2024-08-01 03:43:29 -07:00
Yury Semikhatsky
62834e314f
chore(trace-viewer): less bright status code icon (#31940)
<img width="182" alt="image"
src="https://github.com/user-attachments/assets/8b381bcc-46e3-45c7-8fd2-e020436d1bff">

<img width="206" alt="image"
src="https://github.com/user-attachments/assets/4ea02b47-a4da-44f7-9c26-13b05374e89d">

<img width="213" alt="image"
src="https://github.com/user-attachments/assets/38b50e2a-f69c-4a78-abb2-2680453fc5fd">
2024-07-31 17:29:05 -07:00
Yury Semikhatsky
0217defab4
chore(trace-viewer): do not shrink metadata view (#31938)
Avoids the following effect:

![image](https://github.com/user-attachments/assets/694de773-acc0-4266-87f2-eab67a3c7ce2)
2024-07-31 16:37:16 -07:00
Yury Semikhatsky
ecd384212d
chore(trace-viewer): copy only file name without line number (#31939)
As discussed in the meeting, copy only file name which is shown in the
same line, do not include highlighted line number.
2024-07-31 15:40:13 -07:00
Dmitry Gozman
7c55b94280
fix(trace): make sure the correct attachment name is used for downloads (#31928)
When two attachments have the same content sha1, we used the first one's
name for the downloaded file, no matter which one the user clicked to
download. Now we pass the name explicitly.

References #31912.
2024-07-31 06:20:36 -07:00
Simon Knott
daca1681c0
refactor(ui): in splitview component, move sidebar and main from children into named properties (#31925)
Pulled out from https://github.com/microsoft/playwright/pull/31900

I stumbled over `React.Children`, because it's the first time I saw that
used. https://react.dev/reference/react/Children lists `React.Children`
it as "Legacy" and mentions it's uncommon. Also, the fact that SplitView
only displays its first two children, and all others are silently
discarded, can be a surprise to some.

By separating things out into `sidebar` and `main`, not only do we give
the two elements names (otherwise one needs to remember that sidebar is
always the first child), but we also prevent any "third children" from
being dropped.
2024-07-31 12:48:46 +02:00
Simon Knott
99724d0322
refactor(ui): some react refactorings (#31900)
Addresses https://github.com/microsoft/playwright/issues/31863. This PR
is chonky, but the individual commits should be easy to review. If
they're not, i'm happy to break them out into individual PRs.

There's two main things this does:

1. Remove some unused imports
2. Add a `clsx`-inspired helper function for classname templating

I wasn't able to replace `ReactDOM.render` with `ReactDOM.createRoot`.
This is the new recommended way starting with React 18, and the existing
one is going to be deprecated at some point. But it somehow breaks our
tests, i'll have to investigate that separately.
2024-07-31 12:12:06 +02:00