{"id":20671149,"url":"https://github.com/allnulled/webdemo","last_synced_at":"2025-06-19T04:41:05.330Z","repository":{"id":48068224,"uuid":"133388261","full_name":"allnulled/webdemo","owner":"allnulled","description":"Live web demonstrations in the browser.","archived":false,"fork":false,"pushed_at":"2021-08-09T08:22:49.000Z","size":59,"stargazers_count":1,"open_issues_count":1,"forks_count":1,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-04-12T06:39:14.324Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/allnulled.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-05-14T16:07:44.000Z","updated_at":"2019-03-17T00:13:07.000Z","dependencies_parsed_at":"2022-08-12T17:50:57.406Z","dependency_job_id":null,"html_url":"https://github.com/allnulled/webdemo","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/allnulled/webdemo","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/allnulled%2Fwebdemo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/allnulled%2Fwebdemo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/allnulled%2Fwebdemo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/allnulled%2Fwebdemo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/allnulled","download_url":"https://codeload.github.com/allnulled/webdemo/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/allnulled%2Fwebdemo/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260690142,"owners_count":23047054,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-16T20:25:29.929Z","updated_at":"2025-06-19T04:41:00.319Z","avatar_url":"https://github.com/allnulled.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":" \n\n\n# webdemo\n\n\n![](https://img.shields.io/badge/webdemo-v1.0.0-green.svg) ![](https://img.shields.io/badge/stable-70%25-orange.svg)\n\n\nWeb-based mouse and keyboard automation tool.\n\n\n\n## 1. Installation\n\n#### 1. Download the WebDemo module:\n\n`~$ npm install --save webdemo`\n\n#### 2. Include all the dependencies in your HTML:\n\n```html\n\u003clink  href=\"node_modules/webdemo/dep/domlogger.css\" rel=\"stylesheet\" type=\"text/css\" /\u003e\n\u003cscript src=\"node_modules/webdemo/dep/syn.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"node_modules/webdemo/dep/domlogger.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"node_modules/webdemo/src/webdemo.js\"\u003e\u003c/script\u003e\n```\n\n## 2. Usage\n\n##### 1. Create a new webdemo instance:\n\n```js\nconst demo = new WebDemo(\"Name of this demo\");\n```\n\n##### 2. Add tasks to the demo:\n\n```js\ndemo.speed(600);\ndemo.inform(\"Writing user's name\");\ndemo.mouse(\"[name='name']\").click().type(\"Developer\");\ndemo.inform(\"Writing user's surname\");\ndemo.mouse(\"[name='surname']\").click().type(\"This is a secret\");\ndemo.inform(\"Writing user's age\");\ndemo.mouse(\"[name='age']\").click().type(\"None of your business\");\ndemo.inform(\"Submiting form\");\ndemo.mouse(\"[name='submit']\").click();\n```\n\n##### 3. Run the demo:\n\n```js\ndemo.start(function() {\n // once finished all the tasks...\n});\n```\n\nAnd the demo will start.\n\n\n\n\n\n \n\n## 3. API Reference\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n \n\n### WebDemo\n----\n\n**Type:** `{Class}`\n\n**Parameter:** `{String} title` Title of the new demo.\n\n**Returns:** `{WebDemo}` A new instance of WebDemo class.\n\n**Description:** This class generates a new WebDemo. With this objects, we can automate browser tasks.\n\n\n\n\n \n\n----\n### webDemo._\n\n**Type:** `{Object}`\n\n**Description:** Object that holds the internal stuff of the WebDemo instance.\n\n\n\n \n\n----\n### webDemo._.title\n\n**Type:** `{String} title`\n\n**Description:** Name of the current webDemo.\n\n\n\n \n\n----\n### webDemo._.subject\n\n**Type:** `{HTMLElement}`\n\n**Description:** Element that has the current focus of the webDemo. This means that the actions registered will have this element as target.\n\n\n\n \n\n----\n### webDemo._.logger\n\n**Type:** `{Object:DOMLogger}` \n\n**Url:** https://www.npmjs.com/package/domlogger\n\n**Url:** https://github.com/allnulled/domlogger\n\n**Description:** This object can log messages that one can see in the same page (without the need of opening the console).\n\n\n\n \n\n----\n### webDemo._.tasks\n\n**Type:** `{Array}`\n\n**Description:** Holds all the tasks that have been registered for this webDemo.\n\n\n\n \n\n----\n### webDemo._.cursor\n\n**Type:** `{HTMLElement}`\n\n**Description:** Image of a cursor, that will move over the screen, simulating the click and drag'n'drop events.\n\n\n\n \n\n----\n### webDemo.start()\n\n**Type:** `{Function}`\n\n**Parameter:** `{Function} onFinish` Optional. Callback for when the demo is over.\n\n**Returns:** `{WebDemo}`\n\n**Description:** Starts the demo.\n\n\n\n \n\n----\n### webDemo.inform(message, mode=\"log\")\n\n**Type:** `{Function}`\n\n**Parameter:** `{String} message` Message to be shown.\n\n**Parameter:** `{String} mode` Method to be used for the logging (relative to DOMLogger).\n\n**Returns:** `{WebDemo}`  \n\n**Description:** Logs a message by the DOMLogger instance.\n\n\n\n \n\n----\n### webDemo.mouse(elementReference)\n\n**Type:** `{Function}`\n\n**Parameter:** `{HTMLElement} elementReference` Element in which to put the mouse over.\n\n**Returns:** `{WebDemo}` Returns the same webDemo instance.\n\n**Description:** Moves the mouse to put it over the center of an `{HTMLElement}`.\n\n\n\n \n\n----\n### WebDemo.click()\n\n**Type:** `{Function}`\n\n**Parameter:** `{String} text` Text to type.\n\n**Parameter:** `{Number} speedOpt` Useless for now.\n\n**Returns:** `{WebDemo}` Returns the same webDemo instance.\n\n\n\n\n \n\n----\n### WebDemo.type(test, speedOption)\n\n**Type:** `{Function}`\n\n**Parameter:** `{String} text` Text to type.\n\n**Parameter:** `{Number} speedOpt` Useless for now.\n\n**Returns:** `{WebDemo}` Returns the same webDemo instance.\n\n\n\n\n \n\n----\n### webDemo.then(asyncFn)\n\n**Type:** `{Function}`\n\n**Parameter:** `{AsyncFunction}` Asynchronous function (it \nmeans that its first parameter is the call to the next \nasynchronous operation) that gets executed when the running\nthread dispatches it, and that is finished when the first \nparameter that this function receives, is called.\n\n**Returns:** `{webDemo}` Returns the same webDemo instance.\n\n**Description:** Registers a new task which executes the \nasynchronous function that is passed as first parameter.\n\n\n\n \n\n## 4. Conclusion\n\nSimple library to simulate user's behaviour on a webpage.\n\n\n\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fallnulled%2Fwebdemo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fallnulled%2Fwebdemo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fallnulled%2Fwebdemo/lists"}