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
Related
Tried automating dropdown using the below methods but the dropdown values couldn't be selected.
Method 1:
const comboOption = Selector("mat-option").child("span").withExactText("Hello");
await t.click(comboOption);
Method 2:
ClientFunction(() => {
document.getElementsByClassName('mat-option-text')[0].innerText = 'Hello';
document.getElementsByClassName('mat-option-text')[0].click();
return "Hello";});
The mat-option tag is not within mat-select. It is outside mat-select and within div tag.
Are there other ways to achieve automating mat-option ?
Thank you for the code snippets.
As far as I understand, you are trying to click an option element in another select element.
I created a simple test that should perform the steps you described:
import { Selector } from 'testcafe';
fixture`Getting Started`
.page`http://devexpress.github.io/testcafe/example`;
const selectElement = Selector('#preferred-interface');
const optionElement = selectElement.find('option');
test('My first test', async t => {
await t
.click(selectElement)
.click(optionElement.withText('Both'))
.expect(selectElement.value).eql('Both');
});
If I misunderstood your question, could you please share a simple example of your .html and a detailed description of
what you want to do in the test and which results you expect?
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 using TestCafe 1.8.1 and have a slightly different case than the documentation at https://devexpress.github.io/testcafe/documentation/recipes/test-select-elements.html - my problem is that the example assumes the value of an <option> and its text content will be the same, and in my case, the value is a very unpredictable value.
I can select an item in the dropdown without trouble, using .withText(value) to filter the options, and .click(item) to select it. However, my app then refreshes the page, and ought to re-select the relevant item as it loads up. This is not working and I want to test for it.
So I might have options in the select like:
<select id="foo">
<option value="1234">100x100</option>
<option value="5432">200x100</option>
<option value="9999">100x200</option>
</select>
Obviously, if I test with .expect(citySelect.value).eql('London'); as in the docs it'll fail because the values are nothing like the text content e.g. having clicked '200x100' in the dropdown the value becomes "5432".
Do I need to use a ClientFunction to get the text of the selected item? I understand it's quite awkward passing data into a ClientFunction, would I need to pass the id of the select so the ClientFunction can getElementById to find the select and retrieve it's selected option's text content? It all sounds like the wrong way to be doing things.
Please check the following example that uses ClientFunction API to obtain an option value:
import { Selector, ClientFunction } from 'testcafe';
fixture `Fixture 1`
.page `https://kys0l.csb.app/`;
test('Test 1', async t => {
const selector = Selector('select');
const getValue = ClientFunction((index) => {
const select = selector();
return select.options[index].value;
}, { dependencies: { selector } });
await t
.expect(getValue(0)).eql('1234')
.expect(getValue(1)).eql('5432')
.expect(getValue(2)).eql('9999');
});
See also: Obtain Client-Side Info.
Try using
.expect(citySelect.innertext).eql('London');
1) I need to change //input[#name='loc']/parent::div/following::div[3] as Testcafe compatible Sectors. Is there any wrong with below one :
const locate = Selector('input').withAttribute('name','loc').parent('div').sibling('div').nth(3);
or
const locate = Selector('input').withAttribute('name','loc').parent('div').nextSibling('div').nth(3);
2) Do we have any add-in/tool to evaluate TestCafe selectors ( like ChroPath, xpath-finder, etc.)?
const locate = Selector('input').withAttribute('placeholder','loc').parent('div').sibling('div').nth(3);
I would say that best candidate is const locate = Selector('input').withAttribute('name','loc').parent('div').nextSibling('div').nth(3);
A simple way to validate a Selector is by using the TestCafe assertion API:
await t
.expect(locate.with({visibilityCheck : true}).exists)
.ok()
.hover(locate);
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;