We are using dojo 1.13 with intern v3.
In one of our functional tests we are doing the following:
.findByClassName('functionalTestWidget')
.click()
.sleep(1000)
// check placeholder
.getVisibleText()
.then(function (text) {
assert.strictEqual(text, 'Type here'); // SUCCESS
})
.pressKeys('01/10/2010')
// press tab to get out of the control
.pressKeys('\uE004')
.sleep(1000)
.end()
.findByClassName('functionalTestWidget')
.click()
.sleep(1000)
.getVisibleText()
.then(function (text) {
assert.strictEqual(text, '01/10/2010'); // FAILS : text is ''
})
although it can read the placeholder, after typing someting, pressing tab and then reselecting the widget, the getVisibleText returns an empty string
WebDriver's getVisibleText isn't intended to get the text content of an input element, which is is at the core of the text input Dijits. It works for placeholders because Dijit doesn't use the HTML5 placeholder attribute on inputs, it actually adds a span with the placeholder text to the widget.
To get the text of an input you'll need to call getProperty('value') on the input element itself.
Related
Ran into the issue, where the test code should click the button Process in the iframe. Used npm i cypress-iframe lib, but came up to nothing. Cypress could not find the button.
Tried cy.iframe('[class="resp-iframe"]').find('resp-iframe[id="submit"]')
HTML of the problem
Tried the other ways to click on iframe button:
cy.get('iframe[class="resp-iframe"]').then($element => {
const $body = $element.contents().find('body')
cy.wrap($body).find('resp-iframe[class="btn btn-block btn-primary"]').eq(0).click();
})
also
cy.get('[class="resp-iframe"]').then($element => {
const $body = $element.contents().find('body')
let stripe = cy.wrap($body)
stripe.find('[class="resp-iframe"]').click(150,150)
})
and
cy.iframe('#resp-iframe').find('[name="submitButton"]')
Error
Error 2
Updated FYI:
The first part of code - clicking the Google button in bottom-right:
const getIframeBody = () => {
// get the iframe > document > body
// and retry until the body element is not empty
return cy
.get('[id="popup-contentIframe"]')
.its('0.contentDocument.body')
// wraps "body" DOM element to allow
// chaining more Cypress commands, like ".find(...)"
// https://on.cypress.io/wrap
.then(cy.wrap)
}
getIframeBody().find('[id="payWithout3DS"]').click()
Then, waiting for secure payment preloader to finish up:
cy.wait(20000)
Then, trying to catch the Process button by suggestions:
cy.iframe('[name="AcsFrame"]').find('#submit').click()
or
cy.iframe('[class="resp-iframe"]').find('[id="submit"]')
whole code part looks:
const getIframeBody = () => {
// get the iframe > document > body
// and retry until the body element is not empty
return cy
.get('[id="popup-contentIframe"]')
.its('0.contentDocument.body')
// wraps "body" DOM element to allow
// chaining more Cypress commands, like ".find(...)"
// https://on.cypress.io/wrap
.then(cy.wrap)
}
getIframeBody().find('[id="payWithout3DS"]').click()
cy.wait(20000)
cy.iframe('[name="AcsFrame"]').find('#submit').click()
But still, getting:
Maybe anyone had something like that?
Thanks.
How about you try this:
cy.iframe('[name="AcsFrame"]').find('#submit').click()
You don't need to repeat the resp-iframe inside the .find().
The selector .find('resp-iframe[id="submit"]') means look for HTML like this: <resp-iframe id="submit"> but the element you want is <input id="submit">.
Everything else looks ok
cy.iframe('[class="resp-iframe"]').find('[id="submit"]')
For my test, I am expecting it to start with a value of length 39 (maxlength: 40), and when I press a key (ie: 'a'), the length should then be 40. However, anything I try or look up doesn't seem to allow me to trigger a keypress/keydown/keyup event.
My Component:
<q-input
v-model="name"
class="my-class"
maxlength="40"
\>
My Test:
it('Input should change', async() => {
let wrapper = mount(Component, { name: 'M'.repeat(39) })
let name = wrapper.find('.my-class')
console.log(name.vm.$options.propsData.value) // prints 39 M's as expected
name.trigger('click') // I try clicking the input. I've also tried triggering 'focus'
await wrapper.vm.$nextTick() // I've also tried with and without this
// I've also tried await name.vm.$nextTick()
name.trigger('keydown', { key: 'a' }) // According to their testing docs, this should press 'a'
// I've also tried name.trigger('keyup', { key: 'a' })
// and name.trigger('keypress', { key: 'a' })
await wrapper.vm.$nextTick()
console.log(name.vm.$options.propsData.value) // prints 39 M's without the additional 'a'
expect(name.vm.$options.propsData.value.length).toBe(40)
})
Why does not the value change after triggering keydown?
In short: you can't change the value of input/texarea with dispatching KeyboardEvent programmatically.
How actually do chars come into input? On MDN you can find the description of Keyboardevent sequence (assuming that preventDefault is not called):
A keydown event is first fired. If the key is held down further and the key produces a character key, then the event continues to be emitted in a platform implementation dependent interval and the KeyboardEvent.repeat read only property is set to true.
If the key produces a character key that would result in a character being inserted into possibly an <input>, <textarea> or an element with HTMLElement.contentEditable set to true, the beforeinput and input event types are fired in that order. Note that some other implementations may fire keypress event if supported. The events will be fired repeatedly while the key is held down.
A keyup event is fired once the key is released. This completes the process.
So, keydown leads to input event by default. But that is true only for trusted events:
Most untrusted events will not trigger default actions, with the exception of the click event... All other untrusted events behave as if the preventDefault() method had been called on that event.
Basically trusted events are those initiated by a user and untrusted events are initiated with a script. In most browsers, each event has an attribute isTrusted indicating if the event is trusted or not.
And how to test KeyboardEvents on inputs then?
Well, it depends on what is going on in your KeyboardEvent handler. E.g. if you call preventDefault in certain conditions then you can check if it was called or not in a test using a spy. Here is an example with sinon as a spy and chai as assertion library.
const myEvent = new KeyboardEvent('keydown', { key: 'a' })
sinon.spy(myEvent, 'preventDefault')
await wrapper.find('input').element.dispatchEvent(myEvent)
expect(myEvent.preventDefault.calledOnce).to.equal(true)
But sometimes you even don't need a KeyboardEvent handler. E.g. in your question you write about an input with maximum value length 40 characters. Actually you can just use maxlength HTML attribute for the input to prevent input of more than 40 characters. But just for a study example, we can just cut the value in input handler (it will control the length not only when a user types but also when a user copy-and-pastes a string):
onInput (event) {
event.target.value = event.target.value.substr(0, 40)
...
}
The test for this may look like this:
await wrapper.find('input').setValue('M'.repeat(41))
expect(wrapper.find('input').element.value).to.equal('M'.repeat(40))
So here, we directly change the value of input, not by KeyboardEvent.
I don't know where dialog comes from, but should you not be searching for the element inside wrapper?
wrapper.find('.my-class')
Also most examples I see use mount instead of factory
const wrapper = mount(component)
Here is an example from the docs:
it('Magic character "a" sets quantity to 13', () => {
const wrapper = mount(QuantityComponent)
wrapper.trigger('keydown', {
key: 'a'
})
expect(wrapper.vm.quantity).toBe(13)
})
})
I'm trying to create a simple widget test in Flutter. I have a custom widget that receives some values, composes a string and shows a Text with that string. I got to create the widget and it works, but I'm having trouble reading the value of the Text component to assert that the generated text is correct.
I created a simple test that illustrates the issue. I want to get the text value, which is "text". I tried several ways, if I get the finder asString() I could interpret the string to get the value, but I don't consider that a good solution. I wanted to read the component as a Text so that I have access to all the properties.
So, how would I read the Text widget so that I can access the data property?
import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
void main() {
testWidgets('my first widget test', (WidgetTester tester) async {
await tester
.pumpWidget(MaterialApp(home: Text("text", key: Key('unit_text'))));
// This works and prints: (Text-[<'unit_text'>]("text"))
var finder = find.byKey(Key("unit_text"));
print(finder.evaluate().first);
// This also works and prints: (Text-[<'unit_text'>]("text"))
var finderByType = find.byType(Text);
print(finderByType.evaluate().first);
// This returns empty
print(finder.first.evaluate().whereType<Text>());
// This throws: type 'StatelessElement' is not a subtype of type 'Text' in type cast
print(finder.first.evaluate().cast<Text>().first);
});
}
I got it working. I had to access the widget property of the Element, and then cast it as text:
var text = finder.evaluate().single.widget as Text;
print(text.data);
Please check this simple example.
testWidgets('Test name', (WidgetTester tester) async {
// findig the widget
var textFind = find.text("text_of_field");
// checking widget present or not
expect(textFind, findsOneWidget);
//getting Text object
Text text = tester.firstWidget(textFind);
// validating properies
expect(text.style.color, Colors.black);
...
...
}
You can use find.text
https://flutter.io/docs/cookbook/testing/widget/finders#1-find-a-text-widget
testWidgets('finds a Text Widget', (WidgetTester tester) async {
// Build an App with a Text Widget that displays the letter 'H'
await tester.pumpWidget(MaterialApp(
home: Scaffold(
body: Text('H'),
),
));
// Find a Widget that displays the letter 'H'
expect(find.text('H'), findsOneWidget);
});
Hi i'am using mootools and want to add an input lement
var newinput = new Element('input', {type: 'text', name: "removeusers", value:'hoho' });
$$(imgElement).getParent().adopt(newinput);
but the value isn't set
it creates only an empty element
<input type="text" name="removeusers">
and the displayed textfield is blank
Ok everything was right with mootools, just called this code in an onclick listener which although calls this code:
elements.each( function( element ) { element.clearValue(); } );
Your code is working correctly. The value property is set in the DOM form object but is not displayed as an attribute of the input element. To do so would imply that the value was the defaultValue of the text field when the page was loaded. If you query the value it will return correctly:
console.log( $E('input[name=removeusers]').value );
> "hoho"
You can set the value attribute separately if needed with:
$E('input[name=removeusers]').setAttribute('value', 'hoho');
This seems trivial, but I'm attempting to set up a functional test in Intern to check the inner text of a set of span elements in my page all with the same CSS class, but I can't seem to be able to isolate the text within the span. Here is my code:
'Span check': function () {
return this.remote
.findAllByClassName('mySpanClass')
.then(function (elems) {
assert.strictEqual(elems[0].innerHTML(),'Span Text');
})
}
I've run separate tests to verify that the spans are being found... the findAllByClassName function returns an array of two Objects.
Anyone done anything like this?
You need to use getVisibleText() instead:
Gets the visible text within the element. elements are converted
to line breaks in the returned text, and whitespace is normalised per
the usual XML/HTML whitespace normalisation rules.
return this.remote
.findByCssSelector('.mySpanClass')
.getVisibleText()
.then(function (text) {
assert.strictEqual(text, 'Span Text');
});
This would work for a single element.
If you want to check the text of each span, use:
return this.remote
.findAllByCssSelector('.mySpanClass')
.getVisibleText()
.then(function (texts) {
assert.strictEqual(texts, ['Span1 Text', 'Span2 Text']);
});