add-FormAction (#50)

* add-FormAction

* add documentation

* add documentation

* change FormAction to FillForm

* add some check in fill_form

* Update fill_form.js

* Har support

* Remove excess

---------

Co-authored-by: matthew <[email protected]>

Author: AndrewKorzh

README.md

@@ -153,6 +153,31 @@ Example request body:
  }
 ```
 
+### **/har**
+This POST method allows to get the HAR file
+
+### **/form_action**
+This POST method allows filling out and submitting forms on a webpage by interacting with input elements identified by CSS selectors. It also allows clicking a submit button if specified.
+
+Example request body:
+
+```json5
+{
+    "inputMapping": {  // A dictionary where each key is a CSS selector, and each value is another dictionary containing details about the input for that element.
+        "input[name='username']": {
+            "value": "myUsername", 
+            "delay": 100 
+        },
+        "input[name='password']": {
+            "value": "myPassword",
+            "delay": 100
+        }
+    },
+    "submitButton": "button[type='submit']" //<string> (optional) The CSS selector for the form's submit button. If provided, the button will be clicked after filling in the form.
+}
+```
+
+
 ### **/action**
 
 Body of this POST request should be a js code that declares function action with at least page
@@ -250,5 +275,5 @@ Once you don't need the browser tab you need to explicitly close it (e.g. at the
 - [x] proxy support for puppeteer
 - [x] support of extra headers
 - [x] error handling for requests
-- [ ] har support
+- [x] har support
 - [x] scaling to several docker containers

app.js

@@ -1,4 +1,4 @@
-const {createPuppeteerMetrics} = require('./helpers/meter');  // Essential to put it first
+const { createPuppeteerMetrics } = require('./helpers/meter');  // Essential to put it first
 
 const express = require('express');
 const puppeteer = require('puppeteer-extra')
@@ -21,6 +21,7 @@ const screenshotRouter = require('./routes/screenshot');
 const recaptchaSolverRouter = require('./routes/recaptcha_solver')
 const mhtmlRouter = require('./routes/mhtml');
 const harRouter = require('./routes/har');
+const fillFormRouter = require('./routes/fill_form');
 const closeContextRouter = require('./routes/close_context');
 
 const middlewares = require('./helpers/middlewares');
@@ -78,7 +79,7 @@ async function setupBrowser() {
         const browser = await puppeteer.launch(
             {
                 headless: HEADLESS,
-                defaultViewport: {width: VIEWPORT_WIDTH, height: VIEWPORT_HEIGHT},
+                defaultViewport: { width: VIEWPORT_WIDTH, height: VIEWPORT_HEIGHT },
                 timeout: CONNECT_TIMEOUT
             });
         browser.on('disconnected', setupBrowser);
@@ -96,9 +97,9 @@ async function setupBrowser() {
 })();
 
 app.use(express.json());
-app.use(express.urlencoded({extended: false}));
+app.use(express.urlencoded({ extended: false }));
 app.use(middlewares.logHTTPMiddleware());
-app.use(bodyParser.raw({inflate: true, limit: '200kb', type: 'application/javascript'}));
+app.use(bodyParser.raw({ inflate: true, limit: '200kb', type: 'application/javascript' }));
 app.use(cookieParser());
 
 app.use('/', indexRouter);
@@ -113,6 +114,7 @@ app.use('/screenshot', screenshotRouter);
 app.use('/recaptcha_solver', recaptchaSolverRouter);
 app.use('/mhtml', mhtmlRouter);
 app.use('/har', harRouter);
+app.use('/fill_form', fillFormRouter);
 app.use('/close_context', closeContextRouter);
 
 app.use(middlewares.processExceptionMiddleware);

package.json

@@ -1,6 +1,6 @@
 {
   "name": "scrapy-puppeteer-service",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "private": true,
   "scripts": {
     "start": "node ./bin/www"

routes/fill_form.js

@@ -0,0 +1,50 @@
+const express = require('express');
+const utils = require('../helpers/utils');
+const router = express.Router();
+
+async function action(page, request) {
+    const inputMapping = request.body.inputMapping;
+    const submitButton = request.body.submitButton;
+
+    for (const [selector, params] of Object.entries(inputMapping)) {
+        const value = params.value;
+        const delay = params.delay || 0;
+        await page.type(selector, value, { delay });
+    }
+
+    if (submitButton) {
+        await page.click(submitButton);
+    }
+
+    return await utils.getContents(page);
+
+}
+
+// body = {
+//     "inputMapping": { A dictionary where each key is a CSS selector, and each value is another dictionary containing details about the input for that element:
+//         "selector": <string> The CSS selector for the input element (used as the key).
+//         "value": <string> The text to be inputted into the element.
+//         "delay": <number> A delay (in milliseconds) between each keystroke when inputting the text. Defaults to 0 if not provided.
+//     },
+//     "submitButton": <string> The CSS selector for the form's submit button. If provided, the button will be clicked after filling in the form.
+// }
+//
+router.post('/', async function (req, res, next) {
+
+    if (!req.body.inputMapping) {
+        res.status(400);
+        res.send("No inputMapping provided in fill_form request");
+        next();
+        return;
+    }
+
+    try {
+        let response = await utils.performAction(req, action);
+        res.header('scrapy-puppeteer-service-context-id', response.contextId);
+        res.send(response);
+    } catch (e) {
+        next(e);
+    }
+});
+
+module.exports = router;