I am using webdriver.io with chai and mocha for testing.
In one of my tests I need to count how many elements with the same CSS class are in the page. None of the webdriver.io API seems to return an array.
How can it be achieved?
This is how you do it:
client.elements('.myElements', function(err,res) {
console.log('element count: ',res.value.length);
});
Explanation: with elements you fetch all elements according given selector. It returns an array of webdriver elements which represents the amount of existing elements on the page.
For version 4 of webdriver.io, this is the way
client.elements('.selector').then(function (elems) {
console.log(elems.value.length);
});
For version 7.13.2 of webdriver.io, you can try this
const count = await $$('selector').length
Or you can write to a variable and later use it
let smth = browser.elements('selector').value.length;
Related
In selenium query for selector, if my selector value was (#div-id a). It return all a tags.
Does in testcafe is it posible this to selector function? i just want to avoid looping to get all a tags.
Code Sample
const element = selector('#div-id').find()
var get = await brandUrls.hasAttribute();
console.log(get);
Actual element attached
Yes, it is also possible to achieve the desired behavior with TestCafè in a similar way:
import { Selector } from "testcafe";
// one option
const firstLinkSelector = Selector("#directoryLink-1 a");
// another option
const secondLinkSelector = Selector("#directoryLink-1").find("a");
Read more about the find()-method here.
I'm new to cypress and am trying a couple of different methods to get a checkbox property...
checkBox().should('have.prop', 'checked')
checkBox().its('checked').should('exist')
The first line works fine but I was expecting the second to also pass but I get a "expected Undefined to exist" response.
Thanks
Assuming checkBox() function returns cy.get('.checkbox'), I think
checkBox().its('checked').should('exist')
fails because checkBox() does not return an object containing just the attributes. It returns the whole element (I think as an array). so you can't use its('checked') directly on checkbox().
Anyways, to do what you are expecting to do, you can use several methods,
using invoke('attr', 'checked')
checkBox().invoke('attr', 'checked')
.should('exist')
using getAttribute js function and expect chai assertion
checkBox().then($el => {
expect($el[0].getAttribute('checked')).to.exist;
})
using attributes in js and (its, wrap) in cypress.
Note: As mentioned earlier, you can't directly use its on the cy.get(). You need to extract the attributes from the object and use cy.wrap()
checkBox().then($el => {
cy.wrap($el[0].attributes)
.its('checked')
.should('exist')
})
you can use any of those methods, but the one I recommend is your first method.
cheers. Hope it helps.
How can I select an HTML element containing specific text?
In Selenium Xpath selectors are used, but TestCafe doesn't support Xpath.
How do I do it in TestCafe?
According to the official documentation, in order to select an element containing a certain text, I should use the .withText() method with the selected element, example given is:
import { Selector } from 'testcafe';
fixture `Example`
.page `https://devexpress.github.io/testcafe/example/`;
test('Click test', async t => {
const selectBasedOnText = Selector('label').withText('I have tried TestCafe');
await t
.click(selectBasedOnText);
});
for selecting a label element with the text "I have tried TestCafe".
what worked for me:
import xPathToCss from 'xpath-to-css'
and then use as ex:
.click(xPathToCss("//a[#class='icon-menu login show-login-panel list-item list-item-next']"));
no,
testcafe supports xpath
https://github.com/Programmingarea/XpathSelectorIhaveNotCreated
download the xpath selector
after downloading that
go to your testcafe file and type:
importing xpath-selector
import XPathSelector from './xpath-selector';
using it:
const usingxpath = XPathSelector("your xpath");
simple!
if any doubt ask it in reply
I'm writting e2e tests for a Angular/Polymer app (thus using web-components). Is it possible to have access to DOM properties as in :
$0.selectedItem?
I tried using :
elem = browser.executeScript('return document.querySelector("my-scrollList")');
and then calling
elem .then(function (el){
console.log(el.selectedItem);
});
But it doesn't work.
However, if I call the property directly from the executeScript command like so it works but it is very tedious :
elem = browser.executeScript('return document.querySelector("my-scrollList").selectedItem');
Is there a way to access DOM properties through WebElements or Protractor API ?
Thanks in advance.
With a CSS selector by selecting the selected attribute among the <option>:
$("my-scrollList").$("option[selected]")
or :
$("my-scrollList option[selected]")
Probably you want to calls to $ by chained to find element within a parent. Take a look at Protractor API .
Your code, probably, should look like this one:
elem.then(function (el){
console.log(el.$('selectedItem'));
});
hi i am using cucumber with webdriverio (with chai and chai-as-promised) - following test work -
browser.getText('#copyright').to.eventually.equal('my text').and.notify(callback),
but if i use element like h1 instead of '#copyright' than it does not work, so
browser.getText('h1').to.eventually.equal('my text').and.notify(callback)
does not work,
but callback return me text if i rewrite test as -
browser.getText('h1', function(err, text)
{
expect(text).to.equal('my test');
callback();
});
i wonder what is difference and why second one 'h1' does not work with chai-as-promised' thanks
It doesn't work, because h1 is an element selector, but #copyright is an ID selector.
I'd assume, that getText('h1') returns an array, and getText('#copyright') = single element.