I have mainly worked with cypress previously for e2e automated testing, I have now started working on webdriverIO. So for a cypress command such as
cy.get("[data-testid='nav-bar']").contains("Search Box").click();
What would be the equivalent for this in webdriverIO? I have tried the following approach in a PageObject Model.
class HomePage extends Page {
get navBar() {
return browser.$("[data-testid='nav-bar']");
}
openSearchBox() {
this.navBar().click('//*[text="Search Box"]');
}
}
However, this approach does not seem to work, any help on this would be appreciated.
Leaving Page Objects asside for now, you'd type this in WebdriverIO:
const bar = $('[data-testid='nav-bar']');
expect(bar.getText()).toInclude('Search Box');
bar.click();
You can use chai for the assertion instead of Jest Matchers:
const expectChai = require('chai').expect;
// ...
expectChai(bar.getText()).to.have.string('Search Box');
// ...
The exact analog to
cy.get("[data-testid='nav-bar']").contains("Search Box").click();
can be achieved with xpath selector
$("[data-testid='nav-bar']").$("./*[descendant-or-self::*[contains(text(), 'Search Box')]]").click();
It looks a bit ugly though, consider adding a custom command that would mimic Cypress's contains:
// put this to `before` hook in your wdio.conf.js
browser.addCommand('cyContains', function(text) {
this.waitForExist()
return this.$(`./*[descendant-or-self::*[contains(text(), '${text}')]]`)
}, true)
$("[data-testid='nav-bar']").cyContains("Search Box").click();
P.S.
Check out the selector in the browser console right on this page, paste in the browser console
$x("//span[descendant-or-self::*[contains(text(), 'Search Box')]]")
Related
I am writing e2e Testcases on Cypress for webshop, we have integrated PayPal and I am unable to click on the PayPal button with in the iframe.
I always get an error in finding the element in iframe.
someone have an idea how can I do that?
code
cy.get('iframe')
.getframe3D()
.find('paypal-button-number-0')
Command
Cypress.Commands.add('getframe3D', { prevSubject: 'element' }, $iframe => {
return new Cypress.Promise(resolve => {
$iframe.ready(function() {
resolve($iframe.contents().find('body'));
});
});
});
Interacting with iframe is quite tricky in Cypress however it's possible. Your custom command looks correct and it worked for me as well. However, you can also try below way and check if it is working for you.
Here provide CSS selector for the iframe as an argument getIframeBody() function.
cy.getIframeBody('iframe').find('paypal-button-number-0').click()
Custom Commands
Cypress.Commands.add('getIframeBody', (iframe) => {
return cy.get(iframe).then($iframe => {
const $body = $iframe.contents().find('body')
cy.wrap($body)
})
})
For more info you can follow the cypress blog to interact with iFrame
Your custom command to get the iframe body is fine, you just have the wrong selector for the button.
Since it's a class, you need a . prefix
cy.get('iframe')
.getframe3D()
.find('.paypal-button-number-0')
I've had a few errors trying to render single blog posts.
I tried using the page template with /post/{post_name} and I was getting this error:
warn Non-deterministic routing danger: Attempting to create page: "/blog/", but
page "/blog" already exists
This could lead to non-deterministic routing behavior
I tried again with /blog/{post_name}.
I now have both routes, which I'm not sure how to clean up; but more importantly, on those pages, nothing renders, even though there should be an h1 with it's innerhtml set to the node.title and likewise a div for the content.
I've uploaded my config and components to https://github.com/zackrosegithub/gatsby so you can have a look.
Not sure how to fix
I just want to see my content rendered on the screen.
Developer tools don't seem to help when there's no content rendered as I can't find anything to inspect to try to access it another way.
Thank you for your help
Your approach is partially correct. You are using a promise-based approach but when using then() you are already settling and partially resolving it so you don't need to use the callback of resolve(), which may be causing a duplication of the promise function so try removing it.
Additionally, you may want to use a more friendly approach using async/await functions. Something like:
exports.createPages = async ({ graphql, actions, reporter }) => {
const yourQuery= await graphql(
`
{
allWordpressPost {
edges{
node{
id
title
slug
excerpt
content
}
}
}
}
`
if (yourQuery.errors) {
reporter.panicOnBuild(`Error while running GraphQL query.`);
return;
}
const postTemplate = path.resolve("./src/templates/post.js")
_.each(yourQuery.data.allWordpressPost.edges, edge => {
createPage({
path: `/post/${edge.node.slug}/`,
component: slash(postTemplate),
context: edge.node,
})
})
})
// and so on for the rest of the queries
};
In addition, place a console.log(pageContext) in your postTemplate to get what's reaching that point and name the template as:
const Post = ({pageContext}) => {
console.log("your pageContext is", pageContext);
return <div>
<h1>
{pageContext.title}
</h1>
</div>
}
export default Post;
Using Ember cli 2.9 I'm making a simple app to convert swiss francs to euros. The app works fine manually in my browser but the integration test I've written for the converter fails. It exists as an Ember component called home-index
Template:
<h2>INPUT GOES HERE</h2>
{{input value=userInput class="user-input" placeholder="enter your francs please"}}
<button class="convert-button" {{action 'convertInput'}}>CONVERT</button>
<div class="display-output">{{outputNumber}}</div>
Component logic:
import Ember from 'ember';
export default Ember.Component.extend({
userInput: "",
outputNumber : 0,
numberifiedInput: Ember.computed('userInput', function() {
let userInput = this.get('userInput');
return parseFloat(userInput);
}),
actions: {
convertInput() {
var input = this.get('numberifiedInput');
var converted = input * 0.93;
this.set('outputNumber', converted);
}
}
});
Integration test:
import { moduleForComponent, test } from 'ember-qunit';
import hbs from 'htmlbars-inline-precompile';
moduleForComponent('home-index', 'Integration | Component | home index', {
integration: true
});
test('should recieve input from user and display output', function(assert) {
assert.expect(1);
this.render(hbs`{{home-index}}`);
this.$(".user-input").val("1");
this.$('.convert-button').click();
assert.equal(this.$(".display-output").text(), "0.93", "should display correct converted amount");
});
When using the app manually in the browser the value is correctly converted from 1 to 0.93 and displayed in the div. However, the integration test returns "NaN' instead of "0.93".
When I write the test into an acceptance test instead, it passes and gives the correct result. This led me to believe it was due to the use of asynchronous helpers.
I then tried to rewrite the integration test wrapped in an imported wait method as follows:
return wait()
.then(() => {
assert.equal(this.$(".display-output").text(), "0.93", "should display correct converted amount");
});
});
But still gives "NaN" as a result in the integration test.
Does anyone know why this is happening?
PS. Sorry about posting in snippets, stack overflow code blocks are being temperamental..
Try triggering the events 'input' and 'change' on the input field after setting the val.
$('.user-input').val('1');
$('.user-input').trigger('input');
$('.user-input').change();
See https://github.com/emberjs/ember.js/blob/v2.9.1/packages/ember-testing/lib/helpers/fill_in.js#L15 for how the acceptance test helper fillIn does it (but without jQuery).
If an acceptance test is acceptable, it can be a better way to test this sort of thing since the built-in helpers handle the various events that would normally be triggered by user interaction.
I am using webdriverJS and Jasmine to perform an end-to-end testing of a web page. I would like to test if an element has class under certain circumstances, but I would like to do it using methods from pure jasmine.
This is the part of the code where the issue is located:
describe('Header bar', function() {
it('should show/hide elements accoding to the window position', function() {
this.driver.executeScript('scroll(0, 1000)');
var elemSearch = this.driver.findElements(webdriver.By.id('animatedElement, animatedElement2, animatedElement3'));
expect(elemSearch).toContain('appear-2');
});
})
Do you know if there's a way to solve this issue, or a couple of examples I could look at, without using extensions like jasmine-jquery?
Thanks in advance for your replies!
If you don't want having jasmine-jquery or other third-party packages introducing custom jasmine matchers as a dependency, you can always extract the toHaveClass() matcher implementation and use it. Note that having your assertion logic encapsulated inside custom matchers helps to follow the DRY principle and make your tests cleaner.
FYI, here is toHaveClass implementation we are currently using:
beforeEach(function() {
jasmine.addMatchers({
toHaveClass: function() {
return {
compare: function(actual, expected) {
return {
pass: actual.getAttribute("class").then(function(classes) {
return classes.split(" ").indexOf(expected) !== -1;
})
};
}
};
},
});
});
I have the following:
function activate(routeData) {
// make dataservice call, evaluate results here. If condition is met, reroute:
if (true){
router.navigateTo("#/someRoute");
}
alert ("should not be shown");
}
The alert is getting hit however, and then the view changes.
How do I fully navigate away from the current item and prevent any further code in that vm from being hit?
Update:
I tried using guardroute but I have to activate the viewModel to call the dataservice that returns the data that determines whether or not I should re-route. Using guardroute totally prevents the dataservice from getting called (since nothing in the activate function will get hit).
I also tried returning from the if block but this still loads the view / viewAttached / etc so the UX is glitchy.
The following worked for me in Durandal 2.0:
canActivate: function() {
if(condition)
return {redirect: 'otherRoute'};
return true;
}
activate: // Do your stuff
It's mentioned in the documentation: http://durandaljs.com/documentation/Using-The-Router.html
Here's #EisenbergEffect answer to a quite similar discussion in google groups.
Implement canActivate on your view model. Return a promise of false,
then chain with a redirect.
You might want to give #JosepfGabriel's example (discussion) a try in Durandal 1.2. Check the correct router syntax for your Durandal version, you might have to substitute it with something like router.navigateTo("#/YourHash", 'replace').
canActivate: function () {
return system.defer(function (dfd) {
//if step 2 has a problem
dfd.resolve(false);
})
.promise()
.then(function () { router.navigate("wizard/step1", { trigger: true, replace: true }); });
}
However this is NOT working in Durandal 2.0 and there's a feature request https://github.com/BlueSpire/Durandal/issues/203 for it.
You can't call redirect into the active method.
You can override the guardRoute method from router, to implement redirections.
You can do somehting like that:
router.guardRoute= function(routeInfo, params, instance){
if(someConditios){
return '#/someRoute'
}
}
You can return a promise, true, false, the route to redirect... You can find more information about that in the next link: http://durandaljs.com/documentation/Router/
Rainer's answer was pretty good and works for me adding this small fix.
Inside the then() block simply call the navigation like this
setTimeout(function() { router.navigateTo('#/YOUR DESTINATION'); }, 200);
that should fix your problem. The setTimeout does the trick. Without it the newly navigated page catches the old NavigationCancel from the previous one.
Adding a return in your if (true) block should fix this.
function activate(routeData) {
if (true){
router.navigateTo("#/someRoute");
return;
}
alert ("should not be shown");
}