SwiftUI UI Test How To Display Dynamic Buttons Text Values in an app.scrollViews? - xcode-ui-testing

How To Display Dynamic Buttons Text Values in an app.scrollViews?
I would like to able to tap the button inside first row in the scrollViews, but not sure what the index of the button is. I tried the 1, 2 and 3 with no luck.
let scrollViewsQuery = app/*#START_MENU_TOKEN#*/.scrollViews/*[[".otherElements[\"Tabbar\"].scrollViews",".scrollViews"],[[[-1,1],[-1,0]]],[0]]#END_MENU_TOKEN#*/
let elementsQuery = scrollViewsQuery.otherElements
elementsQuery.buttons.element(boundBy: 0).tap() //
print("----------------------------------------------")
var i = 0
for element in elementsQuery.buttons.allElementsBoundByIndex{
i += 1
print(i)
print(element) //How To Display the Button Text here?
// print( elementsQuery.buttons.element(boundBy: i))
}

Assuming you only have one scrollView present, the code to tap the first button in it would be the following:
let myScrollView = app.scrollViews.firstMatch
let myScrollViewsButtons = myScrollView.buttons
let myScrollViewsFirstButton = myScrollViewButtons.firstMatch
myScrollViewsFirstButton.tap()
A button in this context is an XCUIElement, not something that is particularly printable. Buttons do have label attributes that are generally the text displayed on them...

Related

Xcode UITest scrolling to the bottom of an UITableView

I am writing an UI test case, in which I need to perform an action, and then on the current page, scroll the only UITableView to the bottom to check if specific text shows up inside the last cell in the UITableView.
Right now the only way I can think of is to scroll it using app.tables.cells.element(boundBy: 0).swipeUp(), but if there are too many cells, it doesn't scroll all the way to the bottom. And the number of cells in the UITableView is not always the same, I cannot swipe up more than once because there might be only one cell in the table.
One way you could go about this is by getting the last cell from the tableView. Then, run a while loop that scrolls and checks to see if the cell isHittable between each scroll. Once it's determined that isHittable == true, the element can then be asserted against.
https://developer.apple.com/documentation/xctest/xcuielement/1500561-ishittable
It would look something like this (Swift answer):
In your XCTestCase file, write a query to identify the table. Then, a subsequent query to identify the last cell.
let tableView = app.descendants(matching: .table).firstMatch
guard let lastCell = tableView.cells.allElementsBoundByIndex.last else { return }
Use a while loop to determine whether or not the cell isHittable/is on screen. Note: isHittable relies on the cell's userInteractionEnabled property being set to true
//Add in a count, so that the loop can escape if it's scrolled too many times
let MAX_SCROLLS = 10
var count = 0
while lastCell.isHittable == false && count < MAX_SCROLLS {
apps.swipeUp()
count += 1
}
Check the cell's text using the label property, and compare it against the expected text.
//If there is only one label within the cell
let textInLastCell = lastCell.descendants(matching: .staticText).firstMatch
XCTAssertTrue(textInLastCell.label == "Expected Text" && textInLastCell.isHittable)
Blaines answer lead me to dig a little bit more into this topic and I found a different solution that worked for me:
func testTheTest() {
let app = XCUIApplication()
app.launch()
// Opens a menu in my app which contains the table view
app.buttons["openMenu"].tap()
// Get a handle for the tableView
let listpagetableviewTable = app.tables["myTableView"]
// Get a handle for the not yet existing cell by its content text
let cell = listpagetableviewTable.staticTexts["This text is from the cell"]
// Swipe down until it is visible
while !cell.exists {
app.swipeUp()
}
// Interact with it when visible
cell.tap()
}
One thing I had to do for this in order to work is set isAccessibilityElement to true and also assign accessibilityLabel as a String to the table view so it can be queried by it within the test code.
This might not be best practice but for what I could see in my test it works very well. I don't know how it would work when the cell has no text, one might be able to reference the cell(which is not really directly referenced here) by an image view or something else. It's obviously missing the counter from Blaines answer but I left it out for simplicity reasons.

UI Testing in Xcode 7: Selecting a row number in a UIPickerView / PickerWheel

Is there a way in Xcode 7 UI Testing to select the 3rd row in a UIPickerView?
I have tried various things like this to identify the rows in each picker but all the requests below return 0 found:
XCUIApplication().pickers.element.cells.count
XCUIApplication().pickers.element.staticTexts.count
Any ideas?
Updated: I am aware of adjustToPickerWheelValue method where you can select a particular value you already know, but I am trying to select the 3rd value (index = 4) when I don't know the values that exist in the picker.
You can use -adjustToPickerWheelValue: to select items on a UIPickerView.
When there is one UIPickerView on the screen you can select the element directly, like so.
let app = XCUIApplication()
app.launch()
app.pickerWheels.element.adjustToPickerWheelValue("Books")
If the picker has multiple wheels you will need to first select the wheel via it's accessibility identifier, then adjust it.
app.pickerWheels["Feet"].adjustToPickerWheelValue("5")
Here's a GitHub repo with a working example. And some more information in a blog post I wrote.
Workaround:
let pickerWheel = XCUIApplication().pickers.pickerWheels.element
let appWindowHeight = XCUIApplication().windows.elementBoundByIndex(0).frame.height
let pickerWheelCellHeight = GFloat(44)
func advancePickerWheelOneValue() -> Self {
let topScrollPoint = Double(pickerWheel.frame.midY/appWindowHeight)
let bottomScrollPoint = Double((pickerWheel.frame.midY + pickerWheelCellHeight)/appWindowHeight)
let topScreenPoint = XCUIApplication().windows.elementBoundByIndex(0).coordinateWithNormalizedOffset(CGVector(dx: 0.5, dy: topScrollPoint))
let bottomScreenPoint = XCUIApplication().windows.elementBoundByIndex(0).coordinateWithNormalizedOffset(CGVector(dx: 0.5, dy: bottomScrollPoint))
bottomScreenPoint.pressForDuration(0, thenDragToCoordinate: topScreenPoint)
return self
}
You may need to adjust the dx value depending on where the picker is.
.coordinateWithNormalizedOffset(CGVector(dx: 0.5,
But 0.5 works if the picker occupies the width of the screen.
With this method you an move the picker on value at a time. Call it multiple times and you get to the value you want.
Its not ideal but it can help if you want to check certain indexes. Hopefully you would have to use it on a picker with hundreds of values ;)
Example with Date picker (UIDatePicker)
XCUIApplication().datePickers.pickerWheels.elementBoundByIndex(0).adjustToPickerWheelValue("March")
XCUIApplication().datePickers.pickerWheels.elementBoundByIndex(1).adjustToPickerWheelValue("24")
XCUIApplication().datePickers.pickerWheels.elementBoundByIndex(2).adjustToPickerWheelValue("2000")
And here is example with Picker view (UIPickerView)
XCUIApplication().pickerWheels.element.adjustToPickerWheelValue("Male")

How to dynamically load carousel items in Sencha

I have a problem with my product view. I want to display product data. each product is a "box" with an image and text. I want to display six products on a panel. As of the fact that i have many products i want to have a "carousel like view". My idea was the following: Place 6 products on a panel. Load 3 panels and place each panel as a carousel item so that i can swipe to get to another "page".
To save performance I tried to always have only 3 items in the carousel. The active "page" and the page before, and the page after, so that I can swipe to left/right and the next page can be loaded.
I tried to put my logic in the "onActiveItemChange"-Listener of the carousel, but I had massive problems with adding/removing carousel items. So my Question is is it possible to do what i want to accomplish?
Is there a better alternative? Of course my data is in a store, but I don't want that standard list view.
Another Question: Because my first attempt with the carousel failed i tried to build a Ext.Container (card layout) with the panels on it. But how can I listen to a swipe event on a Panel???
thanks for help ;-)
Even I am doing the same, using carousel & a store. Every page of carousel is a view(panel) which would have 4/6 child views(panels). On store load I am creating those children and then divide them into pages and add those pages to carousel.
This is working fine for me and on activeItemChange I am loading more pages:
activeitemchange: function(container, value, oldValue, eOpts) {
var activeItemIndex = container.getActiveIndex();
var galleryTotal = container.getInnerItems() ? container.getInnerItems().length : 0;
if ((activeItemIndex + 1 == galleryTotal)) {
console.log("At last page, time to load");
var store = this.config.store;
store.nextPage({ addRecords: true });
}
}
I think I understand your issue. Assuming you've got 3 items and you're always viewing the middle one (as you move forward, item 0 gets destroyed and one item gets created). And assuming that each item has an id associated with its location in the list.
var current_item = Ext.getCmp('carousel_name').getActiveItem().getId();
current_item = Number(current_item.replace('item', ''));
//Objects to create
var next_item = current_item + 1;
var previous_item = current_item - 1;
//Objects to destroy
var next2_item = current_item + 2;
var previous2_item = current_item - 2;
//Create items
var createItem = function(item_location, type){
var carousel_item = create_content(item_location);
if(type == 'next'){
Ext.getCmp('carousel_name').add(carousel_item);
}else if(type == 'previous'){
Ext.getCmp('carousel_name').insert(0, carousel_item);
Ext.getCmp('carousel_name').setActiveItem(1);
}
}
createItem(next_item,'next');
createItem(previous_item,'previous');
//Destroy items
if(Ext.getCmp('item'+previous2_item)){
Ext.getCmp('carousel_name').getItems().items[0].destroy();//This is a hack, for some reason with the above commented out line, the item was getting destroyed but wasn't being removed from carousel_name
}
if(Ext.getCmp('item'+next2_item)){
Ext.getCmp('carousel_name').getItems().items[Ext.getCmp('carousel_name').getMaxItemIndex()].destroy();//This is a hack, consistency with previous destroy (above)
}

How to retrieve the controls inside the selected item from a listbox in WP

I'm now facing the most common problem faced my many while working with listboxes. Though I found many answers the the forum, nothing seems to work for me or else i have got it wrong. .
I have created a listbox through code. Every listbox item has a stackpanel and within it two textblocks. the stackpanel has vertical orientation.The foreground of the textblocks have been set to specific colors. When an item has been selected or clicked it moves to another page and on the close of the new page it returns to the old page.
My problem is that, when a listbox item has been clicked, it does not show the selection color which is by default the phones accent color before moving to the next page. Is it because the color of the textblocks have already set while creating the listbox?
So i tried to set it the foreground of the selected item through the SelectionChanged() like this
ListBoxItem selItem = (ListBoxItem)(listboxNotes.ItemContainerGenerator.ContainerFromIndex(listboxNotes.SelectedIndex));
selItem .Foreground = (SolidColorBrush)Application.Current.Resources["PhoneAccentBrush"];
But this does not work, and i assume its cuz there is a stackpanel inside the item.
How exactly this needs to be done? Do i need to retrieve the textblocks inside the stackpanel and set the foreground?? I have not used binding here. Visual Tree Helper???
Thanks
Alfah
In general, the selected color doesn't change on lists where you're navigating.
From my experience with android, there's no 'selector' background on WP7. If you're looking for a cool UI effect that shows some action is happening, the TiltEffect is definitely recommended, and very easy to implement.
http://www.windowsphonegeek.com/articles/Silverlight-for-WP7-Toolkit-TiltEffect-in-depth
However - if you're creating an app that doesn't have immediate navigation, it is possible that you might want a 'selected' cell color / etc. I've attached an image:
https://skydrive.live.com/redir.aspx?cid=ef08824b672fb5d8&resid=EF08824B672FB5D8!366&parid=EF08824B672FB5D8!343
If you note here, the buttons are related to the selected item on the list - I.e. the user can perform 4 different actions based on the selected item, (but they must select an item first!).
internal void SelectionChanged()
{
var item = (((ListBoxItem) _view.servers.SelectedItem).Content) as StackPanel;
if (item != null)
{
for (int i = 0; i < _view.servers.Items.Count; i++)
{
var val = (((ListBoxItem) _view.servers.Items[i]).Content) as StackPanel;
var tb = val.Children[0] as TextBlock;
var tb2 = val.Children[1] as TextBlock;
if (i == _view.servers.SelectedIndex)
{
tb.Foreground = tb2.Foreground = (SolidColorBrush) App.Current.Resources["PhoneAccentBrush"];
}
else
{
tb.Foreground = tb2.Foreground = (SolidColorBrush) //regular color here, b/c all these should no longer be selected
}
}
}
}
The ListItemContainer will have it's Foreground changed automatically. To inherit this, simply don't specify a colour (or style) on your TextBlock.

DataGridView: how to make scrollbar in sync with current cell selection?

I have a windows application with DataGridView as data presentation. Every 2 minutes, the grid will be refreshed with new data. In order to keep the scroll bar in sync with the new data added, I have to reset its ScrollBars:
dbv.Rows.Clear(); // clear rows
SCrollBars sc = dbv.ScrollBars;
dbv.ScrollBars = ScrollBars.None;
// continue to populate rows such as dbv.Rows.Add(obj);
dbv.ScrollBars = sc; // restore the scroll bar setting back
With above codes, the scroll bar reappears fine after data refresh. The problem is that the application requires to set certain cell as selected after the refresh:
dbv.CurrentCell = dbv[0, selectedRowIndex];
With above code, the cell is selected; however, the scroll bar's position does not reflect the position of the selected cell's row position. When I try to move the scroll bar after the refresh, the grid will jump to the first row.
It seems that the scroll bar position is set back to 0 after the reset. The code to set grid's CurrentCell does not cause the scroll bar to reposition to the correct place. There is no property or method to get or set scroll bar's value in DataGriadView, as far as I know.
I also tried to set the selected row to the top:
dbv.CurrentCell = dbv[0, selectedRowIndex];
dbv.FirstDisplayedScrollingRowIndex = selectedRowIndex;
The row will be set to the top, but the scroll bar's position is still out of sync. Not sure if there is any way to make scroll bar's position in sync with the selected row which is set in code?
I found an answer to resolve issue. As I mentioned that the control does not have methods or properties to set the correct scroll bar value. However, the scroll bar and the DatagridView content will display correct if there is an interaction directly towards to the UI such as touch the scroll bar or grid cell. It looks like that the control needs to be refocused and a repaint.
Simply use the following codes does not cause the scroll bar reset:
dgv.Select();
// or dbv.Focuse();
The way I found is that I have to make the DatagridView control disappear to back again. Fortunately, I have a tab control with several tabs. Then I switch the tab to get scroll bar reset:
int index = myTabCtrl.SelectedIndex;
if (index == (myTabCtrl.TabCount)) {
dgv.SeletecedIndex = 0;
}
else {
dgv.SelectedIndex = index + 1;
}
myTabCtrl.SelectedIndex = index;
If you don't have any way to hide the DatagridView on your form, you could simply minimize the form and then restore it back.
The problem is that there will be a fresh on the UI.
It seems, TAB, SHIFT+TAB, END keys don't always bring last column into the visible view.
The following code inside the CurrentCellChanged event handler seems to fix this issue (vb.net):
If Me.MyDataGridView.CurrentCell IsNot Nothing Then
Dim currentColumnIndex As Integer = e.MyDataGridView.CurrentCell.ColumnIndex
Dim entireRect As Rectangle = _
Me.MyDataGridView.GetColumnDisplayRectangle(currentColumnIndex, False)
Dim visiblePart As Rectangle = _
Me.MyDataGridView.GetColumnDisplayRectangle(currentColumnIndex, True)
If (visiblePart.Width < entireRect.Width) Or (entireRect.Width = 0) Then
Me.MyDataGridView.FirstDisplayedCell = Me.MyDataGridView.CurrentCell
'OR Me.MyDataGridView.FirstDisplayedScrollingColumnIndex = currentColumnIndex
End If
End If

Resources