• Stars
    star
    182
  • Rank 211,154 (Top 5 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 5 years ago
  • Updated 3 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

An extension to test web projects with ease! Create a test code without writing a line of code!

Chrome Web Store Chrome Web Store Rating GitHub license

Copycat - Testing Extension

(for jest-puppeteer)

This extension is built to ease creating web tests. It is like Selenium-IDE, but for jest-puppeteer (for now).

Also, this extension records actions on your own browser, so it doesn't need to open up new Selenium or Puppeteer window to record your actions on it.

In recording state it records the events which are stated below with the target elements unique selector.

Supported Actions

Click origined events

Action Key Description
click Mouse click event.
mousedown Mouse mousedown event.
drag-and-drop If mouseup event comes after mousedown event and the difference between their coordinates is greater than 10.

Key originated events

Action Key Description
keydown Keyboard keydown event. It automaticly gathers the keydown events into one if they consecutive triggered and their selectors are the same.
combined-keydown It combines special keydown events if they are trigged at the same time, example: Ctrl+A.

Page change events

Action Key Description
page-change If onbeforeunload event is triggered.
click-page-change If onbeforeunload event of the window comes after click or mousedown event.

Verify events

Triggers with right click on the element and choose proper verify action.

Action Key Description
verify-text It gets the right clicked element's text and matches with the textContent of the element in the test.
verify-link It gets the right clicked element's href and matches with the href of the element in the test.
verify-DOM It gets the right clicked element and check if it exists in the test.

Installation

Google Web Store

Install on Chrome Web Store

or

Manual Installation

git clone https://github.com/omergulen/copycat.git

Go to copycat directory run

yarn install

Now build the extension using

yarn build

You will see a build folder generated inside [PROJECT_HOME]

Adding Copycat to Chrome

In Chrome browser, go to chrome://extensions page and switch on developer mode. This enables the ability to locally install a Chrome extension.

Now click on the LOAD UNPACKED and browse to [PROJECT_HOME]\build ,This will install the React app as a Chrome extension.

When you go to any website and click on extension icon, injected page will toggle.

Remove unwanted actions on hover.

Usage - Testing Environment

Installation of jest-puppeteer

# for jest 22~23
yarn add --save-dev [email protected] puppeteer jest
# for jest 24+
yarn add --save-dev jest-puppeteer puppeteer jest

or

# for jest 22~23
npm install --save-dev [email protected] puppeteer jest
# for jest 24+
npm install --save-dev jest-puppeteer puppeteer jest

Update Jest configuration

Create jest.config.js in the root of your testing environment.

module.exports = {
  "preset": "jest-puppeteer"
}

Creating __tests__ folder

To work with default jest-puppeteer preset, you need to put your test files into the __tests__ folder in the root of your testing environment.

Basic Test Output Code

Following test example in the GIF will generate such code. It starts in my GitHub Profile and clicks one of the pinned repositories (testing-extension) and when page changes it checks for the repository title's href is https://github.com/omergulen/copycat or not.

describe('Test 1', () => {
	beforeAll(async () => {
		await page.goto('https://github.com/omergulen');
	});

	it('Test 1 - 1', async () => {
		await Promise.all([
			page.click(':nth-child(2) > .Box > .pinned-item-list-item-content > .d-flex > .text-bold > .repo'),
			page.waitForNavigation()
		]);
		var nodeLink = await page.$$eval('strong > a', el => el[0].href)
		expect(nodeLink).toBe('https://github.com/omergulen/copycat');
	}, 60000);
});

Update Puppeteer configuration (optional)

Create jest-puppeteer.config.js in the root of your testing environment.

module.exports = {
  launch: {
    headless: false, // Disable headless chromium
    defaultViewport: null // Set page fit to the browser
  },
  browserContext: 'default',
}

Adding test command to the project configuration

In your project's package.json file, insert "test": "jest" line into the "scripts" object.

It will basicly look something like that:

{
  "scripts": {
    "test": "jest"
  },
  "devDependencies": {
    "jest-puppeteer": "^4.3.0"
  },
  "dependencies": {
    "jest": "^24.8.0",
    "puppeteer": "^1.19.0"
  }
}

Running tests

yarn run test or npm run test will do.

Contribution

Bug reports and pull requests are welcome on GitHub at https://github.com/omergulen/testing-extension. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the Contributor Covenant code of conduct

License

The repo is available as open source under the terms of the MIT License.

More Repositories

1

awesome-bdd

A collection of awesome things regarding the behavior-driven development ecosystem. A curated list of courses, tutorials, libraries, tips and tricks, books, videos, and awesome resources about BDD.
JavaScript
38
star
2

universal-console-utils

This extension is built to ease inserting log (print) statements while coding.
TypeScript
16
star
3

producthunt-trending-extension

Browser extension to view Product Hunt trending products on a new tab 🔺 📈
JavaScript
15
star
4

react-native-rate-modal

"Rate us on Google Play/Play Store" modal with React Native.
JavaScript
13
star
5

telegram-currency-bot

Get information about crypto currencies fast in Telegram.
Python
12
star
6

shorten-club-frontend

A URL shortener to voice for Clubhouse👋! Create buckets of links and notes and share them easily with your audience.
JavaScript
11
star
7

awesome-tdd

A collection of awesome things regarding the test-driven development ecosystem. A curated list of courses, tutorials, libraries, tips and tricks, books, videos, and awesome resources about TDD.
JavaScript
9
star
8

overengineered.pro

JavaScript
4
star
9

portfolio

My personal website and portfolio.
TypeScript
2
star
10

hackerrank

My solutions to Hackerrank problems.
Python
2
star
11

SononoGEN

When you get irritating message, with SononoGEN you can make fun of it and send it back.
Python
2
star
12

omergulen

1
star
13

project-euler-solutions

The solutions I've developed in high-school to Project Euler problems.
C
1
star
14

simpleDB

Java
1
star
15

push-to-another-repo-test-source

1
star
16

keygen

Source of keygen.io
CSS
1
star
17

push-to-another-repo-test-target

1
star
18

hs-projects

The projects I made in high-school.
C
1
star
19

fullstackchallenge

JavaScript
1
star
20

losethenot

JavaScript
1
star
21

flatearthjs

A new JS framework you will fall in love with.
1
star
22

gatsby-remark-awesome

A helper plugin of `gatsby-transformer-remark` to parse `awesome-X` markdown files into well-designed and customized single-page web applications.
JavaScript
1
star
23

gatsby-awesome-starter

A simple starter to convert your awesome-x markdown files into well-designed, customizable single-page web applications.
JavaScript
1
star