This seems kinda basic but it has been giving me nothing but trouble. I have a UL LI list that I have styled as tabs. When I test in browser when I click and give focus to the second tab then click the TAB key on the keyboard and enter it gives focus to the 3rd tab and selects it.
I am trying to simulate this using WebDriverJS with the following coffeescript code in my test using chai, onecolor, etc. The part is that giving me the problem is with I can get all normal characters to go fine but none of the special characters seems to work in my sauce labs selenium using this documentation JSON WIRE PROTOCOL. The implementation I am using is from http://webdriver.io/ and the tests are running in https://saucelabs.com/.
it 'tab key and enter works', (done) ->
#timeout 10000
#driver.waitFor '.tab.active', 10000, =>
#driver.addValue '.tab:nth-child(2)', ['U+E004', 'U+E007'], (err) =>
#driver.getElementCssProperty 'css selector', '.tab:nth-child(3)', 'background-color', (err, backgroundColor) =>
#driver.getElementCssProperty 'css selector', '.tab:nth-child(3)', 'color', (err, color) =>
onecolor('#ffffff').cssa().should.equal backgroundColor
onecolor('#000000').cssa().should.equal color
done()
You can use all kinds of unicode characters. To do so you need to set the name of the key as input value (case sensitive). For example:
client.addValue('.tab:nth-child(2)',['Tab','Enter']) // press TAB + ENTER
or
client.addValue('.tab:nth-child(2)',['Meta','c']) // copy text into clipboard
If you don't want to link the keypress action to any input field you can use the keys protocol command to do this action:
client.keys(['Meta','c'])
Related
I am using ionic 5 to build an app and I would like to have a search bar to search and show results from a server.
When looking on the documentation (https://ionicframework.com/docs/api/searchbar), it seems that this element is designed with local filtering in mind.
The event ionInput behaves very similarly to the ionChange, and fires when the input is changed.
I would like to search on the server and present the results only when the user confirms the search (i.e. by pressing enter).
I could not find how to do that.
Best Regards,
Guilherme.
I found out a solution for this, wrapping the search bar element in a form element and reacting to the onSubmit event of the form:
export default class MyComponent extends React.Component<{}> {
handleSubmit(e: FormEvent) {
e.preventDefault();
console.log("submitted")
}
render() {
return (
<form onSubmit={e => this.handleSubmit(e)}>
<IonSearchbar/>
</form>
);
}
}
I have an app with some input fields that I'm trying to automate. The gist of these fields is that I should be able to double click a field, type in a new value, then press Enter to submit that value, which sends a PUT request and also closes the input field. This works for any input type except date.
So far I've tried:
Using cy.type('{enter}'). This gives Typing into a date input with cy.type() requires a valid date in the format 'yyyy-MM-dd'. You passed: {enter}
Using cy.trigger() to send out a keydown event for the enter key. This works, as in it closes the input field successfully but it somehow doesn't send the PUT request.
Pressing enter on the parent Element. Same as using cy.trigger()
Strangely enough, manually opening the input field myself, typing a date and pressing enter will send the request just fine. It seems to me like there's some issue with programmatically pressing enter to submit the field without Cypress interpreting this as my attempt to actually type an invalid character into the date field. The docs do specifically say that no special characters are allowed in a date field.
Can't post any code as this is corporate.
I have tried to let it work, but it simply can't be done at the moment. Something like this should work:
it.only('test', function () {
cy.visit('https://www.html5tutorial.info/html5-date.php')
cy.get('input')
.type('2009-12-12')
.type('{enter}')
})
But it doesn't so I started to dig into the pile of issues and found this one:
https://github.com/cypress-io/cypress/issues/3405 . It is about a different input type, but I believe it is related to your problem.
Unfortunately this problem is still present in Cypress 9.5. One possible work-around is to directly trigger the Javascript keyup or keydown event that you are listening for.
cy.get('input')
.type('2020-01-01T12:00')
.trigger('keydown', {
key: 'Enter',
});
This works for me, but as you pointed out might not in all situations. It depends entirely on how your app is listening for Enter in the first place and on which element.
Another possible option is to call .submit() on the form that wraps the input. If you're testing a component, you could create your own wrapper component that contains a form in order to trigger the submit.
You should remove 'date' attribute like below:
cy.get('input').invoke('removeAttr','type').type('2009-12-12{enter}');
I used something like that in my code, and it worked properly
cy.get('get-your-input').invoke('removeAttr', 'type')type('2022-12-01{enter}').trigger('change');
cy.get('get-your-input').invoke('attr', 'value', '2022-12-01').trigger('change');
cy.get('get-your-input').invoke('attr', 'type', 'date');
Please add date plus enter keystroke in the type: cy.get("#date").type("02-02-2022{enter}");
I am attempting to add a code template to Netbeans so that typing lg followed by Tab will insert a tinylog statement. What I have so far is:
Logger.${logLevel type="org.pmw.tinylog.Logger.*" editable="true" default="info" }("${message}");
This works somewhat and produces a line that looks like:
Logger.info("message");
Pressing Tab moves the cursor between 'info' and 'message'. I can modify the 'message' field, press Tab and move back to the 'info' field. However, if I hit Control-Space and change 'info' to any of the other methods, the new method loads, but the code template wizard shuts down and then Tab just moves code to the right instead of switching between the method name and String parameter.
Have I made an error in my template, or am I asking too much from Netbeans to expect it is possible to keep the wizard alive when I change methods from info(String) to debug(String) for instance?
I wish to create a VSCode extension with an entry form on it - some way of input. So far I have only seen document processing or output for an extension.
How can you display a form of input fields in a vscode extension?
How much data do they need to enter? If it's not much, you should be able to handle it with a series of InputBoxes
From https://code.visualstudio.com/docs/extensionAPI/vscode-api
showInputBox(options?: InputBoxOptions): Thenable<string>
Opens an input box to ask the user for input.
The returned value will be undefined if the input box was canceled (e.g. pressing ESC). Otherwise the returned value will be the string typed by the user or an empty string if the user did not type anything but dismissed the input box with OK.
Parameter Description
options?: InputBoxOptions
Configures the behavior of the input box.
Returns Description
Thenable<string>
A promise that resolves to a string the user provided or to undefined in case of dismissal.
The Visual Studio Code API does not have any native methods to display forms to collect input. You can however, chain together Input Boxes, Quick Picks, etc... You can find all these methods under vscode.window.(...).
If these do not satisfy your needs you can implement a webview which allows you to render integrated HTML in Visual Studio Code and trade messages with the extension.
The most simple aproach would be to simple send all collected data from the form to the extension once you hit the submit button or something similar.
You have a nice little tutorial on how to do that here.
Another approach is to see how far you can go with editing JSON objects in settings.json. I thought I would need a form for 8-10 fields, but it turns out that I can create a settings template that has a series of labels and and entry fields (with type validation).
I'm trying to implement tag-replacement/autocomplete functionality with usage of CKEditor or Summernote, but after a few days of smashing my head into the wall I haven't moved forward at all.
The problem:
user types # in the editor which opens a autocomplete list, during typing list is filtered according to what is typed in
when user selects one of the option the # with linked text is replaced with longer text
user is able to continue writing without having to focus the editor after selecting the hashtag text
example:
array(
"welcometext" => "Dear user welcome in our system",
"footertext" => "Hope to here from you soon"
)
The two problems that I have with this are
- making any autocomplete to work in any way
- created simple ckeditor plugin that was replacing hastags with hardcoded text, but after replacement focus was lost
Any help will be appreciated.
did you try this solution?
CKEDITOR.replace('fieldToReplace',{
on: {
'instanceReady': function(e){
CKEDITOR.instances[fieldToReplace].focusManager.focus();
}
});