I have a page that loads an iframe, but I get NoSuchElementError error messages.
My code:
driver.wait(until.ableToSwitchToFrame(0)).then((d) => {
//*** SLEEP HERE
const button = By.css(".button");
driver.wait(until.elementLocated(dropdownElem)).then((btn) => {
btn.click();
});
});
First I switch to the correct iframe, then I try to wait for the element to load inside the iframe.
If I insert a driver.sleep(1000); to the line //*** SLEEP HERE it works, otherwise it fails with:
NoSuchElementError: no such element: Unable to locate element: {"method":"css selector","selector":".button"
}
Why doesn't the driver.wait line waits for the element to become available?
I tested this on my local and it seems to have worked fine for a button within Iframe. Here is the code
var webdriver = require('selenium-webdriver');
var driver = new webdriver.Builder().usingServer().withCapabilities({'browserName': 'chrome' }).build();
driver.get('file:///Users/../sampleFiles/sample-iframe.html');
driver.wait(webdriver.until.ableToSwitchToFrame(0)).then((d) => {
//*** SLEEP HERE
const button = webdriver.By.css(".Button");
driver.wait(webdriver.until.elementLocated(button)).then((btn) => {
btn.click();
btn.getTagName().then((tag) => {
console.log(tag);
});
});
});
I get button on console
and Iframe HTML this is tested on is
<html lang="en"><head>
<meta charset="UTF-8">
<title>Example of HTML Iframe</title>
</head>
<body>
<iframe src="file:///Users/../sampleFiles/sample.html" width="300" height="200">
<html><head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<button id="ButtonID" class="Button">Click Me!</button>
</body></html>
</iframe>
</body></html>
Check your driver.wait(until.elementLocated(dropdownElem)) line , seems theres a typo , change it to
driver.wait(until.elementLocated(button )) and try again
Related
I have tried this code
// Get HTML to print from element
const prtHtml = document.getElementById('print').innerHTML;
// Get all stylesheets HTML
let stylesHtml = '';
for (const node of [...document.querySelectorAll('link[rel="stylesheet"], style')]) {
stylesHtml += node.outerHTML;
}
console.log(stylesHtml);
// Open the print window
const WinPrint = window.open();
WinPrint.document.write(`<!DOCTYPE html>
<html>
<head>
${stylesHtml}
</head>
<body>
${prtHtml}
</body>
</html>`);
WinPrint.document.close();
WinPrint.focus();
WinPrint.print();
WinPrint.close();
but it only add portions of vuetify css like v-btn. My problem is I am printing with a lot of helpers like d-flex text-right on a div but not working with this code.
How to write a test for horizontal scrolling on the web page with Test Cafe
As being new to automation testing as well to the Test Cafe I can't find an example of a test for horizontal scrolling with Test cafe.
TestCafe does not provide the separate scroll action, however, TestCafe performs a scroll automatically when you call any action. For example, if you need to scroll to some element, you can use the hover action.
If you still need to scroll your page without any action, you can use the ClientFunction mechanism. Please see the following code:
import { ClientFunction } from 'testcafe';
const browserscroll = ClientFunction(function() {
window.scrollBy(0,1000)
});
test('Test', async t => {
await browserscroll();
});
UPDATED:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
#scroll-container {
overflow: scroll;
width: 800px;
height: 800px;
}
#scroll-content {
height: 5000px;
width: 5000px;
background-color: blue;
}
</style>
</head>
<body>
<div id="scroll-container">
<div id="scroll-content"></div>
</div>
</body>
</html>
Test Code:
import { Selector, ClientFunction } from 'testcafe';
fixture `My first fixture`
.page `../pages/index.html`;
const scrollContainer = Selector('#scroll-container');
const scrollFn = ClientFunction(scrollValue => {
scrollContainer().scrollLeft = scrollValue;
}, { dependencies: { scrollContainer } });
test('My first test', async t => {
await scrollFn(1000);
await t.debug();
});
I'm trying to use TestCafe to test a chatbot which uses a contenteditable div as the user-input. Have actually succeeded with Chrome and Firefox to press enter and pass the tests, but have not been able to get Safari to press enter. I realize that contenteditable does not support pressKey("enter") but I'm wondering why it works for both Chrome and Firefox and not Safari, and whether I can get it to work for Safari?
test("Able to send a message on enter keypress", async t => {
await t
.typeText(chatbot.userReply, "hi")
.pressKey("enter")
.expect(chatbot.transcriptMessages.find("li").withText("hi").count).eql(1)
})
It's difficult to say why this does not work in Safari without researching a working sample showing the problem. As far as I understand from your description, your contenteditable element has the keypress event handler, which sends a message on the enter press. I've prepared a sample project to demonstrate this approach, and it all operates correctly both Safari and Chrome:
Test page:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="editor" contenteditable="true" style="width: 300px; height: 300px; border: 1px solid black;">test</div>
<script>
document.getElementById('editor').addEventListener('keypress', function() { alert('test') })
</script>
</body>
</html>
Test code:
fixture `test`
.page `../pages/index.html`;
test(`test`, async t => {
await t.click('#editor');
await t.pressKey('enter');
});
In a comment on this page you mentioned that this is in an iframe so you will need to do:
await t.switchToIframe(iframeSelector);
When switching back you can do:
await t.switchToMainWindow();
My node version is: 10.6.0
My npm version is: 6.1.8
I am rendering a website under a WebView inside a react native app.
I need to open a URL outside the react native app when I touch a link.
My html file is like below
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" >
$(document).ready(function () {
$("#fb").click(function() {
window.postMessage("fbclicked");
});
});
</script>
</head>
<body>
<a id="fb" href="fb">Click Here</a>
</body>
</html>
What should i do in my react native App.js to open the link outside of the app.
Need help.
Thanks.
You need to use linking.
Linking.openURL(url).catch(err => console.error('An error occurred', err));
If URL is like http://, it's open the browser. Also if it's mailto: , open your email client . Etc...
The code below is from the standard example from the dojo tooltipdialogue.
I have a requirement to stop the behaviour of the tooltip closing when you move the mouse away from the dialogue. Is there a way to override the onMouseLeave event to keep the tooltip open until the user clicks a button with in the tooltipdialogue?
<!DOCTYPE html>
<html >
<head>
<link rel="stylesheet" href="../_static/js/dojo/../dijit/themes/claro/claro.css">
<script>dojoConfig = {parseOnLoad: true}</script>
<script src='../_static/js/dojo/dojo.js'></script>
<script>
require([
"dijit/TooltipDialog",
"dijit/popup",
"dojo/on",
"dojo/dom",
"dojo/domReady!"
], function(TooltipDialog, popup, on, dom){
var myTooltipDialog = new TooltipDialog({
id: 'myTooltipDialog',
style: "width: 300px;",
content: "<p>I have a mouse leave event handler that will close the dialog.",
onMouseLeave: function(){
popup.close(myTooltipDialog);
}
});
on(dom.byId('thenode'), 'mouseover', function(){
popup.open({
popup: myTooltipDialog,
around: dom.byId('thenode')
});
});
});
</script>
</head>
<body class="claro">
<div id="thenode">Move the mouse over me to pop up the dialog.</div>
Yes. Just remove the onMouseLeave event handler from the myTooltipDialog declaration. And close the popup on click of another button inside the tooltipDialog whichever you want to be handling the event.