Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/5v1988/kanstructor-demo-project
a demo project that uses Kanstructor
https://github.com/5v1988/kanstructor-demo-project
Last synced: 3 days ago
JSON representation
a demo project that uses Kanstructor
- Host: GitHub
- URL: https://github.com/5v1988/kanstructor-demo-project
- Owner: 5v1988
- Created: 2024-01-28T07:32:55.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2024-04-07T23:19:58.000Z (7 months ago)
- Last Synced: 2024-04-08T00:56:22.835Z (7 months ago)
- Language: JavaScript
- Homepage:
- Size: 909 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
> Write, test and repeat using YAML syntax
## Highlights
- No programming
- Automated tests in plain Yaml
- Visual regression tests in minutes
- Browser compatibility checks
- Designed for test engineers, product teams
## Installation
**IMPORTANT:** Since this package is node based project, let's remember to install `node` and `npm` as pre-requisites before setting up the project. [Refer here for more info.](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)
```sh
npx setup-dance-studio demo-project
```
Running the above command automatically sets up project structure, along with example files. [This section](#quick-start) provides the details on how the project resources are organised.
In order to run the tests, the following command does the job:
```sh
npm run test
```
## Quick Start
- **Step 1** : The `src` folder under the project is going to be a root directory for all testing stuff, and the most of the project contents will be inside `resources` directory.
- **Step 2** : Under `resources` folder, let's create `tests` folder which will contain test files in a plain YAML format. Note that, this package `dancing-yaml` identifies a file as a test file only if it ends in `*test.yaml`. [More on how to write tests?](#write-tests)
- **Step 3** : Many a times, `CSS` and `XPath` values used to identify html elements will be used in several places across test files. To keep all such values in centralized place, the folder `elements` needs to be created within `resources`. Just like test files, the element files need to be ending in `*element.yaml` The following snippet shows some example element yaml.
```yaml
### Login page elements' xpath and css
login_email: "[name='email']"
login_password: "[name='password']"
login_button: "//button[normalize-space()='Login']"
home_logo: "a[href*='home']"
```
- **Step 4** : The next step is, the folders `extracted-contents` and `snapshots` need to be created to save all contents extracted during testing to external files and to keep golden copies of screenshots that will be verified against app under tests during testing respectively.
- **Step 5** : All common configurations such as browser, env etc will have to be in the file: `config.yaml` under `config` folder. The following snippet shows some examples.
```yaml
browser: chrome
headless: false
device: Desktop Chrome
url: https://github.com/5v1988/kanstructor
```
— **Step 6** : Lastly, to run all tests, the test runner `runMe.js` needs to be created in the project as follows:
```js
import runMe from 'dancing-yaml'
runMe();
```
Now execute tests using `node src/runMe.js` from command line. Note that, not necessarily that the runner method must always be named as `runMe`; The below is the sample structure once all setup is complete.
```sh
.
├── README.md
├── node_modules
├── package-lock.json
├── package.json
└── src
├── resources
│ ├── config
│ │ └── config.yaml
│ ├── elements
│ │ └── todo-element.yaml
│ ├── reports
│ │ ├── results.html
│ │ └── results.json
│ ├── snapshots
│ │ ├── original-screenshot-1.png
│ │ └── reference-screenshot-1.png
│ └── tests
│ └── todo-test.yaml
└── runMe.js
```
## Write Tests
— Tests are expected to be written in Yaml files, otherwise known as test files while using this package. Each of these tests should have to be written using well known testing format: `Arrange-Act-Assert`
```yaml
description: Some tests on cypress todo demo site
tests:
- name: Set and delete todo lists
exclude: false
arrange:
- name: openUrl
url: url
act:
- name: Add the first item
locator: .new-todo
action: type
value: Schedule doctor appointment
- name: Press Enter
pause: 1
action: press
value: Enter
- name: Add the second item
locator: .new-todo
action: type
value: Prepare a blog content
- name: Press Enter
pause: 1
action: press
value: Enter
- name: Add the third item
locator: .new-todo
action: type
value: Fix the air conditioner
- name: Press Enter
pause: 1
action: press
value: Enter
- name: Screenshot after adding all items
pause: 1
action: snapshot
path: "src/example/resources/snapshots/original-screenshot-1.png"
- name: Hover to the first item
locator: "//div[normalize-space()='Schedule doctor appointment']"
action: hover
- name: Delete the first item
pause: 2
locator: "//div[normalize-space()='Schedule doctor appointment']//button"
action: click
- name: Hover to the second item
locator: "//div[normalize-space()='Prepare a blog content']"
action: hover
- name: Delete the second item
pause: 2
locator: "//div[normalize-space()='Prepare a blog content']//button"
action: click
- name: Hover to the third item
locator: "//div[normalize-space()='Fix the air conditioner']"
action: hover
- name: Delete the third item
pause: 2
locator: "//div[normalize-space()='Fix the air conditioner']//button"
action: click
- name: Screenshot after deleting all items
pause: 1
action: snapshot
path: "src/example/resources/snapshots/original-screenshot-2.png"
assert:
- name: Verify if the first item deleted
pause: 2
type: text
text: Schedule doctor appointment
state: invisible
- name: Verify if the second item deleted
pause: 2
type: text
text: Prepare a blog content
state: invisible
- name: Verify if the third item deleted
pause: 2
type: text
text: Fix the air conditioner
state: invisible
- name: Compare screenshot after all items added
type: snapshot
original: "src/example/resources/snapshots/original-screenshot-1.png"
reference: "src/example/resources/snapshots/reference-screenshot-1.png"
- name: Compare screenshot after all items deleted
type: snapshot
original: "src/example/resources/snapshots/original-screenshot-2.png"
reference: "src/example/resources/snapshots/reference-screenshot-2.png"
```
— A test file can have more than one test, however, our recommendation is to have a few of them, organized by some commonalities
— A test folder `tests` can contain several test files; No limits
— The high-level blocks — Arrange, Act and Assert, contain a sequence of steps to perform certain actions during testing.
### Arrange Reference
Name
Description
Keys
Example
openUrl
Open an app url in browser
Required —
name,
url
Optional —
pause
- name: openUrl
url: https://github.com/5v1988
### Act Reference
Action
Description
Keys
Example
type
Enter characters into textboxes
Required —
name,
action,
locator,
value
Optional —
pause
- name: Type in username
action: type
locator: "input[name='email']"
value: [email protected]
check,
uncheck
Check (or Uncheck) radio button/checkbox
Required —
name,
action,
locator,
Optional —
pause
- name: Choose a gender
action: check
locator: "input[type='checkbox']"
click,
doubleclick
Click (or Doubleclick) button/link
Required —
name,
action,
locator,
Optional —
pause
- name: Type in username
action: click
locator: '#file-submit'
select
Select a dropdown value
Required —
name,
action,
locator,
value
Optional —
pause
- name: choose_dropdown
locator: "#dropdown"
action: select
value: Option 2
press
Simulate a key press
Required —
name,
action,
value
Optional —
pause
- name: Press enter
action: press
value: Enter
clear,
focus,
hover
Clear (or focus or hover) on html element
Required —
name,
action,
locator
Optional —
pause
- name: hover on the login link
locator: "//button[@id='login']"
action: hover
snapshot
Take a screenshot of a current window
Required —
name,
action,
path
Optional —
pause
- name: Screenshot the login failure
pause: 1
action: snapshot
path: "path/to/save.png"
upload
Upload a file to the app
Required —
name,
action,
locator
path
Optional —
pause
- name: Upload an image
action: upload
locator: '#file-upload'
path: src/example/innerText.txt
extract
Extract a text contents from the current window
By default, Page source of the current window will be extracted
Locator must also be given only if `extractType` is given
Required —
name,
action,
path
Optional —
locator
extractType — textContents, innerText, innerHTML
pause
- name: Extract form contents
action: extract
path: "path/to/save.txt"
locator: "form#customer"
extractType: innerText
### Assert Reference
Type
Description
Keys
Example
element
Assert the expectation by having element(s) on the page
Required —
name,
type,
locator,
state (Accepted values: visible, invisible, enabled, disabled, checked, unchecked, containText),
text (Required only if state = containText)
Optional —
pause
- name: Verify dropdown selected
type: element
locator: "//option[@selected]"
state: containText
text: Option 2
text
Verify if text displayed ( or not displayed)
Required —
name,
type,
text,
state (Accepted values: visible, invisible)
Optional —
pause
- name: verify_upload
type: text
text: innerText.txt
state: 'visible'
snapshot
Compare the expected screenshot with the actual one on the current screen
Required —
name,
type,
original,
reference
Optional —
pause
- name: Verify failure screen
type: snapshot
original: "path/to/screenshot.png"
reference: "path/to/reference.png"
## Roadmap
— [X] Browser
— [O] Summary report
— [O] Parameterized tests
— [O] API
— [O] Mobile
## Contribute
## Support
## License