microsoft/playwright
1
1
Fork 0
mirror of https://github.com/microsoft/playwright.git synced 2025-01-07 11:46:42 +03:00
Code Issues Projects Releases Wiki Activity

docs: add FormData to the examples (#30557)

Browse Source
This commit is contained in:
Yury Semikhatsky 2024-04-25 16:31:27 -07:00 committed by GitHub
parent 6d20da568e
commit ae9345d0bd
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 48 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
docs/src/api/class-apirequestcontext.md
View File

@ -190,10 +190,12 @@ All responses returned by [`method: APIRequestContext.get`] and similar methods
- returns: <[APIResponse]> - returns: <[APIResponse]>
Sends HTTP(S) request and returns its response. The method will populate request cookies from the context and update Sends HTTP(S) request and returns its response. The method will populate request cookies from the context and update
context cookies from the response. The method will automatically follow redirects. JSON objects can be passed directly to the request. context cookies from the response. The method will automatically follow redirects.
**Usage** **Usage**
JSON objects can be passed directly to the request:
```js ```js
await request.fetch('https://example.com/api/createBook', { await request.fetch('https://example.com/api/createBook', {
method: 'post', method: 'post',
@ -227,28 +229,17 @@ var data = new Dictionary<string, object>() {
await Request.FetchAsync("https://example.com/api/createBook", new() { Method = "post", DataObject = data }); await Request.FetchAsync("https://example.com/api/createBook", new() { Method = "post", DataObject = data });
``` ```
The common way to send file(s) in the body of a request is to encode it as form fields with `multipart/form-data` encoding. You can achieve that with Playwright API like this: The common way to send file(s) in the body of a request is to upload them as form fields with `multipart/form-data` encoding. Use [FormData] to construct request body and pass it to the request as [`option: multipart`] parameter:
```js ```js
// Open file as a stream and pass it to the request: const form = new FormData();
const stream = fs.createReadStream('team.csv'); form.set('name', 'John');
await request.fetch('https://example.com/api/uploadTeamList', { form.append('name', 'Doe');
method: 'post', // Send two file fields with the same name.
multipart: { form.append('file', new File(['console.log(2024);'], 'f1.js', { type: 'text/javascript' }));
fileField: stream form.append('file', new File(['hello'], 'f2.txt', { type: 'text/plain' }));
} await request.fetch('https://example.com/api/uploadForm', {
}); multipart: form
// Or you can pass the file content directly as an object:
await request.fetch('https://example.com/api/uploadScript', {
method: 'post',
multipart: {
fileField: {
name: 'f.js',
mimeType: 'text/javascript',
buffer: Buffer.from('console.log(2022);')
}
}
}); });
``` ```
@ -262,15 +253,14 @@ APIResponse response = request.fetch("https://example.com/api/uploadTeamList",
// Or you can pass the file content directly as FilePayload object: // Or you can pass the file content directly as FilePayload object:
FilePayload filePayload = new FilePayload("f.js", "text/javascript", FilePayload filePayload = new FilePayload("f.js", "text/javascript",
"console.log(2022);".getBytes(StandardCharsets.UTF_8)); "console.log(2022);".getBytes(StandardCharsets.UTF_8));
APIResponse response = request.fetch("https://example.com/api/uploadTeamList", APIResponse response = request.fetch("https://example.com/api/uploadScript",
RequestOptions.create().setMethod("post").setMultipart( RequestOptions.create().setMethod("post").setMultipart(
FormData.create().set("fileField", filePayload))); FormData.create().set("fileField", filePayload)));
``` ```
```python ```python
api_request_context.fetch( api_request_context.fetch(
"https://example.com/api/uploadScrip'", "https://example.com/api/uploadScript", method="post",
method="post",
multipart={ multipart={
"fileField": { "fileField": {
"name": "f.js", "name": "f.js",
@ -619,26 +609,17 @@ formData.Set("body", "John Doe");
await request.PostAsync("https://example.com/api/findBook", new() { Form = formData }); await request.PostAsync("https://example.com/api/findBook", new() { Form = formData });
``` ```
The common way to send file(s) in the body of a request is to upload them as form fields with `multipart/form-data` encoding. You can achieve that with Playwright API like this: The common way to send file(s) in the body of a request is to upload them as form fields with `multipart/form-data` encoding. Use [FormData] to construct request body and pass it to the request as `multipart` parameter:
```js ```js
// Open file as a stream and pass it to the request: const form = new FormData();
const stream = fs.createReadStream('team.csv'); form.set('name', 'John');
await request.post('https://example.com/api/uploadTeamList', { form.append('name', 'Doe');
multipart: { // Send two file fields with the same name.
fileField: stream form.append('file', new File(['console.log(2024);'], 'f1.js', { type: 'text/javascript' }));
} form.append('file', new File(['hello'], 'f2.txt', { type: 'text/plain' }));
}); await request.post('https://example.com/api/uploadForm', {
multipart: form
// Or you can pass the file content directly as an object:
await request.post('https://example.com/api/uploadScript', {
multipart: {
fileField: {
name: 'f.js',
mimeType: 'text/javascript',
buffer: Buffer.from('console.log(2022);')
}
}
}); });
``` ```
@ -650,16 +631,16 @@ APIResponse response = request.post("https://example.com/api/uploadTeamList",
FormData.create().set("fileField", file))); FormData.create().set("fileField", file)));
// Or you can pass the file content directly as FilePayload object: // Or you can pass the file content directly as FilePayload object:
FilePayload filePayload = new FilePayload("f.js", "text/javascript", FilePayload filePayload1 = new FilePayload("f1.js", "text/javascript",
"console.log(2022);".getBytes(StandardCharsets.UTF_8)); "console.log(2022);".getBytes(StandardCharsets.UTF_8));
APIResponse response = request.post("https://example.com/api/uploadTeamList", APIResponse response = request.post("https://example.com/api/uploadScript",
RequestOptions.create().setMultipart( RequestOptions.create().setMultipart(
FormData.create().set("fileField", filePayload))); FormData.create().set("fileField", filePayload)));
``` ```
```python ```python
api_request_context.post( api_request_context.post(
"https://example.com/api/uploadScrip'", "https://example.com/api/uploadScript'",
multipart={ multipart={
"fileField": { "fileField": {
"name": "f.js", "name": "f.js",

63
packages/playwright-core/types/types.d.ts vendored
View File

@ -15805,11 +15805,12 @@ export interface APIRequestContext {
/** /**
* Sends HTTP(S) request and returns its response. The method will populate request cookies from the context and * Sends HTTP(S) request and returns its response. The method will populate request cookies from the context and
* update context cookies from the response. The method will automatically follow redirects. JSON objects can be * update context cookies from the response. The method will automatically follow redirects.
* passed directly to the request.
* *
* **Usage** * **Usage**
* *
* JSON objects can be passed directly to the request:
*
* ```js * ```js
* await request.fetch('https://example.com/api/createBook', { * await request.fetch('https://example.com/api/createBook', {
* method: 'post', * method: 'post',
@ -15820,29 +15821,18 @@ export interface APIRequestContext {
* }); * });
* ``` * ```
* *
* The common way to send file(s) in the body of a request is to encode it as form fields with `multipart/form-data` * The common way to send file(s) in the body of a request is to upload them as form fields with `multipart/form-data`
* encoding. You can achieve that with Playwright API like this: * encoding. Use [FormData] to construct request body and pass it to the request as `multipart` parameter:
* *
* ```js * ```js
* // Open file as a stream and pass it to the request: * const form = new FormData();
* const stream = fs.createReadStream('team.csv'); * form.set('name', 'John');
* await request.fetch('https://example.com/api/uploadTeamList', { * form.append('name', 'Doe');
* method: 'post', * // Send two file fields with the same name.
* multipart: { * form.append('file', new File(['console.log(2024);'], 'f1.js', { type: 'text/javascript' }));
* fileField: stream * form.append('file', new File(['hello'], 'f2.txt', { type: 'text/plain' }));
* } * await request.fetch('https://example.com/api/uploadForm', {
* }); * multipart: form
*
* // Or you can pass the file content directly as an object:
* await request.fetch('https://example.com/api/uploadScript', {
* method: 'post',
* multipart: {
* fileField: {
* name: 'f.js',
* mimeType: 'text/javascript',
* buffer: Buffer.from('console.log(2022);')
* }
* }
* }); * });
* ``` * ```
* *
@ -16214,26 +16204,17 @@ export interface APIRequestContext {
* ``` * ```
* *
* The common way to send file(s) in the body of a request is to upload them as form fields with `multipart/form-data` * The common way to send file(s) in the body of a request is to upload them as form fields with `multipart/form-data`
* encoding. You can achieve that with Playwright API like this: * encoding. Use [FormData] to construct request body and pass it to the request as `multipart` parameter:
* *
* ```js * ```js
* // Open file as a stream and pass it to the request: * const form = new FormData();
* const stream = fs.createReadStream('team.csv'); * form.set('name', 'John');
* await request.post('https://example.com/api/uploadTeamList', { * form.append('name', 'Doe');
* multipart: { * // Send two file fields with the same name.
* fileField: stream * form.append('file', new File(['console.log(2024);'], 'f1.js', { type: 'text/javascript' }));
* } * form.append('file', new File(['hello'], 'f2.txt', { type: 'text/plain' }));
* }); * await request.post('https://example.com/api/uploadForm', {
* * multipart: form
* // Or you can pass the file content directly as an object:
* await request.post('https://example.com/api/uploadScript', {
* multipart: {
* fileField: {
* name: 'f.js',
* mimeType: 'text/javascript',
* buffer: Buffer.from('console.log(2022);')
* }
* }
* }); * });
* ``` * ```
* *