I have this problem, I have some tests of e2e with puppeteer and they are failing because the chrome unsaved changes pop up appears and I do not want them to be saved, do you know how I could eliminate it?
I wanna click on the calcel btn of the pop up, or other way to make it work
Puppeteer has a way of handling alerts. You can Accept or Dismiss it.
https://pptr.dev/api/puppeteer.dialog
Example from the page above
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
page.on('dialog', async dialog => {
console.log(dialog.message());
await dialog.dismiss();
await browser.close();
});
page.evaluate(() => alert('1'));
})();
Related
I want to use pressKey() to trigger the F1 or other function key.However,the pressKey seems like don't have this ability to finish what I want.
I see someone report the same question here,and in it,one of the solution they gave is like:
const pressF5 = ClientFunction(() => {
var event = new KeyboardEvent('keydown', { key: 'F5' });
document.dispatchEvent(event)
});
await pressF5();
(I have modified it to F5)
I've try this,the pressF5 work(I don't actually know if it work or not,cause it didn't gave error) but it didn't refresh the page.It just gave me test pass message.Did I use it wrong or is there anyway to trigger the function key?
Thanks in advance if anyone can help!
Edit 10/18
I have something like this:
import {Selector} from 'testcafe';
import {ClientFunction} from 'testcafe';
fixture`KEY FN`
.page`https://en.key-test.ru/`
const pressF2 = ClientFunction (() => {
const event1 = new KeyboardEvent('keydown', { code: 'F2' });
document.dispatchEvent(event1)
})
const pressF3 = ClientFunction (() => {
const event1 = new KeyboardEvent('keydown', { code: 'F3' });
document.dispatchEvent(event1 )
})
test('KEY_FN', async t => {
await t
.maximizeWindow()
.wait(3000)
await t .eval(() => location.reload(true))
await t .wait(3000)
await pressF2()
await t .wait(3000)
await pressF3()
await t
.wait(3000)
});
the site is use on testing which key you press.And the below code works as I think,it detect I press F2 and F3
I do press the key with testcafe,but how to manage to let the site have like if I press F1,it show the specific function(for example,if you press F1 on google,it will pop out a help support page)
As I mentioned earlier, system events like help calls or DevTools are not part of a web application and therefore are not built into TestCafe. However, some of them you can imitate. So, you've already used a function that is equivalent to F5 reload:
await t.eval(() => location.reload(true));
If you want to call up help, then, in Chrome, you can use
await t.navigateTo('https://support.google.com/chrome/?p=help&ctx=keyboard');
I'm using Robotframework and Browser library to automate some tasks on the web. I used to use Selenium, and with selenium there is a way to get the logs, for example in the case of a failure:
driver = webdriver.Remote()
logs = driver.get_log('browser')
I've been struggling to find a way to do the same exact thing using Playwright's Browser library. Is it possible?
Certainly. You can use the page.on('console') event to log what appears in the DevTools console. Here's an example of using debug library to do so.
Make sure to export DEBUG=playwright:console or you won't see anything.
Here's how to do it in JS:
const playwright = require('playwright');
const debugConsole = require('debug')('playwright:console');
(async () => {
const browser = await playwright.chromium.launch({ headless: false });
const context = await browser.newContext();
const page = await context.newPage();
await page.on('console', (msg) => {
if (msg && msg.text) {
if (typeof msg.text === 'function') {
debugConsole('PAGE LOG:', msg.text());
} else {
debugConsole('PAGE LOG:', msg.text);
}
} else {
debugConsole('PAGE LOG:', msg);
}
});
await page.goto('https://example.com', { waitUntil: 'networkidle' });
})();
And in python:
from playwright.sync_api import sync_playwright
def print_args(msg):
for arg in msg.args:
print(arg.json_value())
with sync_playwright() as p:
browser = p.chromium.launch()
page = browser.new_page()
page.on("console", print_args)
page.goto("https://abrahamjuliot.github.io/creepjs/", wait_until="networkidle")
page.wait_for_timeout(5000)
browser.close()
If you are looking for more system-level stuff, there is also a dumpio launch parameter that you can set, which will cause Playwright to provide verbose logs on the actual launch of browser executable.
I have the following scenario:
Load page
Expect spinner is hidden
Type username Click search
Expect spinner display
After a few seconds delay, expect spinner to hide
Assert the right user details are displayed
Here is the working demo
I have mocked the network request in my test spec, but I am unable to understand how to assert spinner is visible after I click the search button
Here is my test spec:
import {Selector, RequestMock} from "testcafe";
import mockUser from "../mocks/mockUser.json";
var apiMocks = RequestMock()
.onRequestTo(/\/api\/users/)
.respond(mockUser, 200, {
'access-control-allow-credentials': "*",
'access-control-allow-origin': "*"
})
fixture `When a user is searched`
.page(`http://localhost:3000/`)
.requestHooks(apiMocks);
test("Should fetch user details", async t => {
const spinnerEl = Selector("[data-test-id='spinner']");
await t.expect(spinnerEl.exists).notOk();
await t
.typeText("[data-test-id='txt-search']", "foo")
.click("[data-test-id='btn-search']");
// This line does not work
// await t.expect(spinnerEl.exists).ok();
await t.expect(Selector("[data-test-id='username']").innerText).eql("Foo Bar");
await t.expect(Selector("[data-test-id='userid']").innerText).eql("foo");
})
I am new to TestCafe, could someone help me with this.
Thanks!
It is difficult to check whether the described spinner element is shown due to the following:
It is displayed only during a short period of time. This does not allow TestCafe to check it in time. Using mocks makes the spinner appear only for milliseconds.
TestCafe waits for all requests and does not perform any actions until XHR requests are completed. This means that assertions will not start until your request is finished.
However, it's still possible to work around the issue.
You can use MutationObserver and TestCafe ClientFunctions mechanism.
You can create your element observer using the ClientFunction. The observer will watch for the app element changes. If the spinner element appears the observer will be notified and set the window.spinnerWasShown variable to true.
After the button is clicked, you can check that the windows.spinnerWasShown variable is set to true.
Here is the full example:
import { Selector, RequestMock, ClientFunction } from "testcafe";
import mockUser from "../mocks/mockUser.json";
var apiMocks = RequestMock()
.onRequestTo(/\/api.github.com\/users/)
.respond(mockUser, 200, {
'access-control-allow-credentials': "*",
'access-control-allow-origin': "*"
});
fixture`When a user is searched`
.page(`http://localhost:3000/`)
.requestHooks(apiMocks);
const spinnerWasShown = ClientFunction(() => window.spinnerWasShown);
const observeSpinner = ClientFunction(() => {
var appEl = document.querySelector('.app');
const config = { attributes: true, childList: true };
const callback = function(mutationsList) {
for(let mutation of mutationsList) {
if (mutation.type === 'childList') {
for (var i =0; i < mutation.addedNodes.length; i++ )
window.spinnerWasShown = window.spinnerWasShown || mutation.addedNodes[i].className.indexOf('spinner') > -1;
}
}
};
const observer = new MutationObserver(callback);
observer.observe(appEl, config);
});
test("Should fetch user details", async t => {
const spinnerEl = Selector("[data-test-id='spinner']");
await t.expect(spinnerEl.exists).notOk();
await t.typeText("[data-test-id='txt-search']", "foo");
await observeSpinner();
await t.click("[data-test-id='btn-search']");
await t.expect(spinnerWasShown()).eql(true);
await t.expect(spinnerEl.exists).notOk();
await t.expect(Selector("[data-test-id='username']").innerText).eql("Foo Bar");
await t.expect(Selector("[data-test-id='userid']").innerText).eql("foo");
});
I am using Jest and have puppeteer set up as in this repository, which is linked to from the Jest documentation.
I am trying to write some automated smoke tests on a WordPress website using puppeteer. One of the tests attempts to upload an image to the WordPress Media Library.
This is the test:
it('Create test media', async () => {
// go to Media > Add New
await page.goto(`${env.WP_HOME}/wp/wp-admin/media-new.php`)
const display = await page.evaluate(() => {
const el = document.querySelector('#html-upload-ui')
return window.getComputedStyle(el).display
})
if (display !== 'block') {
// ensure we use "built-in uploader" as it has `input[type=file]`
await page.click('.upload-flash-bypass > a')
}
const input = await page.$('#async-upload')
await input.uploadFile(testMedia.path)
})
The file input field's value is populated as expected (I know this because if I save out a screenshot after the call to uploadFile it shows the path of the file in the input), and the form is submitted, however when I go to view the media library there are no items.
I have tried the following amendments to the uploadFile part of the test, to no avail:
// 1. attempt to give time for the upload to complete
await input.uploadFile(testMedia.path)
await page.waitFor(5000)
// 2. attempt to wait until there is no network activity
await Promise.all([
input.uploadFile(testMedia.path),
page.waitForNavigation({waitUntil: 'networkidle0'})
])
// 3. attempt to submit form manually (programmatic)
input.uploadFile(testMedia.path)
page.evaluate(() => document.querySelector('#file-form').submit())
await page.waitFor(5000) // or w/ `waitForNavigation()`
// 4. attempt to submit form manually (by interaction)
input.uploadFile(testMedia.path)
page.click('#html-upload')
await page.waitFor(5000) // or w/ `waitForNavigation()`
The problem is that file uploading doesn't work when connecting to a Browser instance via WebSocket as in jest-puppeteer-example. (GitHub issue here: #2120.)
So instead of doing that just use puppeteer.launch() directly when setting up your test suite (instead of via the custom "Jest Node environment"):
let browser
, page
beforeAll(async () => {
// get a page via puppeteer
browser = await puppeteer.launch({headless: false})
page = await browser.newPage()
})
afterAll(async () => {
await browser.close()
})
You also then have to manually submit the form on the page, as in my experience uploadFile() doesn't do this. So in your case, for the WordPress Media Library single file upload form, the test would become:
it('Create test media', async () => {
// go to Media > Add New
await page.goto(`${env.WP_HOME}/wp/wp-admin/media-new.php`)
const display = await page.evaluate(() => {
const el = document.querySelector('#html-upload-ui')
return window.getComputedStyle(el).display
})
if (display !== 'block') {
// ensure we use the built-in uploader as it has an `input[type=file]`
await page.click('.upload-flash-bypass > a')
}
const input = await page.$('#async-upload')
await input.uploadFile(testMedia.path)
// now manually submit the form and wait for network activity to stop
await page.click('#html-upload')
await page.waitForNavigation({waitUntil: 'networkidle0'})
})
For testing Vue2 I use testcafe.
Command to run tests
testcafe firefox test/e2e/specs/ --app \"npm run dev\"
--app-init-delay 20000 -S -s test/e2e/screenshots
Test file
import { ClientFunction, Selector } from 'testcafe';
const devServer = require('../../../webpack/devServer');
fixture(`Getting Started`)
// Load the URL your development server runs on.
.page(`http://localhost:${devServer.port}/#/login`);
test('test login', async t => {
const userSelector = await new Selector('.login-squere input[type="text"]');
const passSelector = await new Selector('.login-squere input[type="password"]');
const logiIn = await new Selector('.login-squere button');
await t.typeText(userSelector, 'manager')
.typeText(passSelector, 'manager')
.click(logiIn);
});
I expect after .click(logiIn) site to route to /#/projects, but nothing happens
I added to test
await t.typeText(userSelector, 'manager')
.typeText(passSelector, 'manager')
.click(logiIn)
.navigateTo(`http://localhost:${devServer.port}/#/projects`);
And again no result. If I set .page to /#/projects it wil be rerouted to login.
So I can test only login page, because I cant make testcafe route Vue to next view.
This problem appears only if after login click we have ajax. TestCafe doesnt have request handler, so it is better to try something else for e2e
Try this one:
test('login', async t => {
await login(t);
});
and separate your code into a new function:
const login = async t => {
const userSelector = await new Selector('.login-squere input[type="text"]');
const passSelector = await new Selector('.login-squere input[type="password"]');
const logiIn = await new Selector('.login-squere button');
await t.typeText(userSelector, 'manager')
.typeText(passSelector, 'manager')
.click(logiIn);
};