Filip/playwright
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

docs(fetch): post file examples (#17312)

Browse source
This commit is contained in:
Yury Semikhatsky 2022-09-13 16:05:57 -07:00 committed by GitHub
parent 4f11a4d5e7
commit 35a86a2d02
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 361 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

262
docs/src/api/class-apirequestcontext.md
View file

@ -177,6 +177,106 @@ discards all stored responses, and makes [`method: APIResponse.body`] throw "Res
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:
```js
await request.fetch('https://example.com/api/createBook', {
method: 'post',
data: {
title: 'Book Title',
author: 'John Doe',
}
});
```
```java
Map<String, Object> data = new HashMap();
data.put("title", "Book Title");
data.put("body", "John Doe");
request.fetch("https://example.com/api/createBook", RequestOptions.create().setMethod("post").setData(data));
```
```python
data = {
"title": "Book Title",
"body": "John Doe",
}
api_request_context.fetch("https://example.com/api/createBook", method="post", data=data)
```
```csharp
var data = new Dictionary<string, object>() {
{ "title", "Book Title" },
{ "body", "John Doe" }
};
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:
```js
// Open file as a stream and pass it to the request:
const stream = fs.createReadStream('team.csv');
await request.fetch('https://example.com/api/uploadTeamList', {
method: 'post',
multipart: {
fileField: stream
}
});
// 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);')
}
}
});
```
```java
// Pass file path to the form data constructor:
Path file = Paths.get("team.csv");
APIResponse response = request.fetch("https://example.com/api/uploadTeamList",
RequestOptions.create().setMethod("post").setMultipart(
FormData.create().set("fileField", file)));
// Or you can pass the file content directly as FilePayload object:
FilePayload filePayload = new FilePayload("f.js", "text/javascript",
"console.log(2022);".getBytes(StandardCharsets.UTF_8));
APIResponse response = request.fetch("https://example.com/api/uploadTeamList",
RequestOptions.create().setMethod("post").setMultipart(
FormData.create().set("fileField", filePayload)));
```
```python
api_request_context.fetch(
"https://example.com/api/uploadScrip'",
method="post",
multipart={
"fileField": {
"name": "f.js",
"mimeType": "text/javascript",
"buffer": b"console.log(2022);",
},
})
```
```csharp
var file = new FilePayload()
{
Name = "f.js",
MimeType = "text/javascript",
Buffer = System.Text.Encoding.UTF8.GetBytes("console.log(2022);")
};
var multipart = Context.APIRequest.CreateFormData();
multipart.Set("fileField", file);
await Request.FetchAsync("https://example.com/api/uploadScript", new() { Method = "post", Multipart = multipart });
```
### param: APIRequestContext.fetch.urlOrRequest
* since: v1.16
- `urlOrRequest` <[string]|[Request]>
@ -227,6 +327,40 @@ Sends HTTP(S) [GET](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/GE
The method will populate request cookies from the context and update
context cookies from the response. The method will automatically follow redirects.
Request parameters can be configured with `params` option, they will be serialized into the URL search parameters:
```js
await request.get('https://example.com/api/getText', {
params: {
'isbn': '1234',
'page': 23,
}
});
```
```java
request.get("https://example.com/api/getText", RequestOptions.create()
.setQueryParam("isbn", "1234")
.setQueryParam("page", 23));
```
```python
query_params = {
"isbn": "1234",
"page": "23"
}
api_request_context.get("https://example.com/api/getText", params=query_params)
```
```csharp
var params = new Dictionary<string, object>()
{
{ "isbn", "1234" },
{ "page", 23 },
}
await request.GetAsync("https://example.com/api/getText", new() { Params = params });
```
### param: APIRequestContext.get.url = %%-fetch-param-url-%%
* since: v1.16
### param: APIRequestContext.get.params = %%-java-csharp-fetch-params-%%
@ -318,6 +452,134 @@ Sends HTTP(S) [POST](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/P
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:
```js
await request.post('https://example.com/api/createBook', {
data: {
title: 'Book Title',
author: 'John Doe',
}
});
```
```java
Map<String, Object> data = new HashMap();
data.put("title", "Book Title");
data.put("body", "John Doe");
request.post("https://example.com/api/createBook", RequestOptions.create().setData(data));
```
```python
data = {
"title": "Book Title",
"body": "John Doe",
}
api_request_context.post("https://example.com/api/createBook", data=data)
```
```csharp
var data = new Dictionary<string, object>() {
{ "firstNam", "John" },
{ "lastName", "Doe" }
};
await request.PostAsync("https://example.com/api/createBook", new() { DataObject = data });
```
To send form data to the server use `form` option. Its value will be encoded into the request body with `application/x-www-form-urlencoded` encoding (see below how to use `multipart/form-data` form encoding to send files):
```js
await request.post('https://example.com/api/findBook', {
form: {
title: 'Book Title',
author: 'John Doe',
}
});
```
```java
request.post("https://example.com/api/findBook", RequestOptions.create().setForm(
FormData.create().set("title", "Book Title").set("body", "John Doe")
));
```
```python
formData = {
"title": "Book Title",
"body": "John Doe",
}
api_request_context.post("https://example.com/api/findBook", form=formData)
```
```csharp
var formData = Context.APIRequest.CreateFormData();
formData.Set("title", "Book Title");
formData.Set("body", "John Doe");
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:
```js
// Open file as a stream and pass it to the request:
const stream = fs.createReadStream('team.csv');
await request.post('https://example.com/api/uploadTeamList', {
multipart: {
fileField: stream
}
});
// 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);')
}
}
});
```
```java
// Pass file path to the form data constructor:
Path file = Paths.get("team.csv");
APIResponse response = request.post("https://example.com/api/uploadTeamList",
RequestOptions.create().setMultipart(
FormData.create().set("fileField", file)));
// Or you can pass the file content directly as FilePayload object:
FilePayload filePayload = new FilePayload("f.js", "text/javascript",
"console.log(2022);".getBytes(StandardCharsets.UTF_8));
APIResponse response = request.post("https://example.com/api/uploadTeamList",
RequestOptions.create().setMultipart(
FormData.create().set("fileField", filePayload)));
```
```python
api_request_context.post(
"https://example.com/api/uploadScrip'",
multipart={
"fileField": {
"name": "f.js",
"mimeType": "text/javascript",
"buffer": b"console.log(2022);",
},
})
```
```csharp
var file = new FilePayload()
{
Name = "f.js",
MimeType = "text/javascript",
Buffer = System.Text.Encoding.UTF8.GetBytes("console.log(2022);")
};
var multipart = Context.APIRequest.CreateFormData();
multipart.Set("fileField", file);
await request.PostAsync("https://example.com/api/uploadScript", new() { Multipart = multipart });
```
### param: APIRequestContext.post.url = %%-fetch-param-url-%%
* since: v1.16
### param: APIRequestContext.post.params = %%-java-csharp-fetch-params-%%

99
packages/playwright-core/types/types.d.ts vendored
View file

@ -12720,6 +12720,45 @@ export interface APIRequestContext {
/**
* 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:
*
* ```js
* await request.fetch('https://example.com/api/createBook', {
* method: 'post',
* data: {
* title: 'Book Title',
* author: 'John Doe',
* }
* });
* ```
*
* 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:
*
* ```js
* // Open file as a stream and pass it to the request:
* const stream = fs.createReadStream('team.csv');
* await request.fetch('https://example.com/api/uploadTeamList', {
* method: 'post',
* multipart: {
* fileField: stream
* }
* });
*
* // 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);')
* }
* }
* });
* ```
*
* @param urlOrRequest Target URL or Request to get all parameters from.
* @param options
*/
@ -12803,6 +12842,18 @@ export interface APIRequestContext {
* Sends HTTP(S) [GET](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/GET) 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.
*
* Request parameters can be configured with `params` option, they will be serialized into the URL search parameters:
*
* ```js
* await request.get('https://example.com/api/getText', {
* params: {
* 'isbn': '1234',
* 'page': 23,
* }
* });
* ```
*
* @param url Target URL.
* @param options
*/
@ -12960,6 +13011,54 @@ export interface APIRequestContext {
* Sends HTTP(S) [POST](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/POST) 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:
*
* ```js
* await request.post('https://example.com/api/createBook', {
* data: {
* title: 'Book Title',
* author: 'John Doe',
* }
* });
* ```
*
* To send form data to the server use `form` option. Its value will be encoded into the request body with
* `application/x-www-form-urlencoded` encoding (see below how to use `multipart/form-data` form encoding to send files):
*
* ```js
* await request.post('https://example.com/api/findBook', {
* form: {
* title: 'Book Title',
* author: 'John Doe',
* }
* });
* ```
*
* 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:
*
* ```js
* // Open file as a stream and pass it to the request:
* const stream = fs.createReadStream('team.csv');
* await request.post('https://example.com/api/uploadTeamList', {
* multipart: {
* fileField: stream
* }
* });
*
* // 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);')
* }
* }
* });
* ```
*
* @param url Target URL.
* @param options
*/