If you are familiar with Cypress, you'll find this architecture as simple as it could be, and it's quite enough for our purposes. Let's look at a basic test case - navigating to wikipedia.org, typing something in the search field and asserting the title of the resulting page. In Cypress, this would look like this:
// wiki.cy.ts
describe("Extended tests", () => {
it("cypress test", () => {
cy.visit("https://www.wikipedia.org/");
cy.get("#searchInput").clear().type("Stranger in a Strange Land");
cy.get('button[type="submit"]').click();
cy.get('h1#firstHeading').should('have.text', 'Stranger in a Strange Land')
});
});
Now is the time to launch our code and ensure everything runs smoothly. Afterwards, we can proceed with translating this example into Selenium and perform our first injection.
Selenium injections
In this section, we will focus on creating the initial Selenium method. It's important to note that we are only creating a method, not a test. If you are acquainted with the Selenium automation tool, you might be accustomed to running tests using a mocha test runner. However, the Cypress framework already provides a test runner. Therefore, our objective is to create a method specifically for executing the Selenium script.
To begin, let's establish a new folder at the root and name it "Selenium." Within this folder, we will create a file called "selenium-test.ts" and proceed with coding the necessary implementation.
// selenium-test.ts
import { By, Builder, selenium } from 'selenium-webdriver';
import { expect } from 'chai';
export default async function () {
const driver = await new Builder().forBrowser('chrome').build();
await driver.get('https://www.wikipedia.org/');
await driver.findElement(By.css('#searchInput')).sendKeys('Stranger in a Strange Land');
await driver.findElement(By.css('button[type="submit"]')).click();
const innerText = await driver.findElement(By.css('h1#firstHeading')).getText();
expect(innerText).to.equal('Stranger in a Strange Land');
await driver.quit();
return null;
}
In this part of the code, we will launch an additional browser instance, navigating to the URL, and do some actions. After that, close the browser and return a “null” value. It’s important to note that any method launching with “cy.task()” should return something in order for it to work properly.
Another important thing is that we can't run Selenium tests in the same browser session with Cypress. It means we can't run Cypress tests and then switch to Selenium methods, and then switch back to Cypress. The code into the “cy.task()” will be runned into a separate NodeJS process. When using Selenium or Playwright injections, it implies that we have separate logic that will be launched in a distinct browser instance.
Now, let's define a Selenium task for Cypress. To do this, navigate to the "cypress.config.ts":
// cypress.config.ts
import { defineConfig } from 'cypress';
export default defineConfig({
e2e: {
setupNodeEvents(on: Cypress.PluginEvents, config: Cypress.PluginConfigOptions) {
on('task', {
async selenium(testPath:string) {
const { default: defaultExport } = await import(`./selenium/${pathToTest}`);
return defaultExport();
}
});
}
}
});
Within this task, our objective is to define the path for testing and executing the default method of the module. If we have more than one Selenium test, we need to place it to separate files. Then, we can use one task and specify the path to this test with the argument. Alternatively, we can have one file with a few Selenium methods. In this case, we need to specify separate tasks with hardcoded names for each method.
With these preparations complete, we can now proceed to inject Selenium into the Cypress test:
// wiki.cy.ts
describe('Extended tests', () => {
it('cypress test', () => {
cy.visit('https://www.wikipedia.org/');
cy.get('#searchInput').clear().type('Stranger in a Strange Land');
cy.get('button[type='submit']').click();
cy.get('h1#firstHeading').should('have.text', 'Stranger in a Strange Land')
});
it('selenium test', () => {
cy.task('selenium','selenium-test');
});
});
This code will launch a task with the name “selenium” and pass into it argument “selenium-test”, which is the name of a file with our Selenium method.
Playwright injections
We can apply the same procedure to Playwright. Let's create a new folder in the root and call it “Playwright”, inside this folder create “playwright-test.ts”:
// playwright-test.ts
import { LaunchOptions, chromium } from 'playwright';
import { expect } from '@playwright/test';
const playwrightOptions: LaunchOptions = {
headless: false
};
export default async function () {
const browser = await chromium.launch(playwrightOptions);
const context = await browser.newContext();
const page = await context.newPage();
await page.goto('https://www.wikipedia.org/');
await page.type('#searchInput', 'Stranger in a Strange Land');
await page.click('button[type="submit"]');
const title = await page.innerText('h1#firstHeading');
expect(title).toEqual('Stranger in a Strange Land');
await browser.close();
return null;
}
Then add a new “task” in “cypress.config.ts”:
// cypress.config.ts
import { defineConfig } from 'cypress';
export default defineConfig({
e2e: {
setupNodeEvents(on: Cypress.PluginEvents, config: Cypress.PluginConfigOptions) {
on('task', {
async selenium(testPath:string) {
const { default: defaultExport } = await import(`./selenium/${testPath}`);
return defaultExport();
}
});
on('task', {
async playwright(testPath:string) {
const { default: defaultExport } = await import(`./playwright/${testPath}`);
return defaultExport();
}
});
}
}
});
and “wiki.cy.ts”:
// wiki.cy.ts
describe('Extended tests', () => {
it('cypress test', () => {
cy.visit('https://www.wikipedia.org/');
cy.get('#searchInput').clear().type('Stranger in a Strange Land');
cy.get("button[type='submit']").click();
cy.get('h1#firstHeading').should('have.text', 'Stranger in a Strange Land')
});
it('selenium test', () => {
cy.task('selenium','selenium-test');
});
it('playwright test', () => {
cy.task('playwright','playwright-test');
});
});
Once all the necessary implementations are completed, the updated architecture should look like this:
