I want to use selenium to test every possible user actions in a web application. For example there are 2 paths in an application like pageA->pageB->pageC->pageD; pageA->pageB->pageE and we use a list to store the elements on pageB. I want to use a for loop to test every element in this list.
The problem is: after testing the first path, how to go back to pageB to execute another user action? Is this a method to record the state or position of pageB so that can go back to pageB then test the second element?
Many thanks in advance!
I think the best thing to do is to test the real behavior of a user. So you can either create 2 tests, one for each path, or one test with the first path, then go back in the history using Navigation.back (or with navigation button provided by your website) and then go to page E.
The first solution is nice because you got 2 independent tests, the second is useful if you need to test some side effects of the first path.
Related
I have an application that has a list of employees as a part of it. When the user clicks on an employee, the app navigates to the details page of the employee. In the details page there is a button that executes history.goBack(), which would take the user to the employee list, but that is not the only way to navigate to the employee list in the app.
I need to execute certain logic only when the user has gotten to the employee list by using history.goBack (the logic should NOT be executed, when the user gets to the employee list, f.e. using history.push).
How can I detect whether the user got there by using history.goBack() in the employee list component?
Presumably you also need to run this logic when the user clicks the built in browser "back" button, since this is functionally identical? The short answer is, you can't. The browser has no built in events for navigation direction by design for security reasons.
What you can do instead is create a HOC or Hook which calls history.listen and continuously updates some piece of state with the previous location. Then provide it as Context to the relevant components and compare it where needed with the current location.
This is probably a better solution anyway since it sounds like you only want to run logic in this limited routing scenario, and listening to a generalised "back" event would make it prone to errors should you add more ways to route back to the Employee List in the future.
You can use the history.action prop. After goBack is POP while after replace is PUSH or REPLACE.
https://reactrouter.com/web/api/history
Notice that the action is also POP on first load. If you want to ignore this case, combine it with history.length > 1.
To summarize:
const isBack = history.action === "POP" && history.length > 1;
https://codesandbox.io/s/react-router-dom-identify-goback-1po29?file=/src/pages/Project.js
(Click on "About" and "Back")
I am learning cucumber. I have two scenarios. I can't say the exact due to company policies. First Step file is like
Scenario 1: Flow with attachments
Given Login to APP
When User chooses "country"
And clicks "Yes"
And attaches "files"
And Go to location page
And add comments
Then Submit
Scenario2: Flow without attachments
Given Login to APP
When User chooses "country"
And clicks "Yes"
And add players manually
And User picks players
And User clicks on a player
And does the settings
And Go to location page
And add comments
Then Submit
Do I need to write all the steps again in Scenario 2 or can I do something so that I can bypass writing all the steps in feature file.
I mean can I maintain only different steps in the 2nd feature while like we do in writing step file or glue code for that.
If yes how to do it, so that it run all the previous steps. Please help
Instead of writing all the steps in terms of small actions the users performs on the system (like "go to page", "click this" , "submit that"), think about what the user is trying to achieve and create a step that describes that in a way that is meaningful to the user (i.e. "add players from a file", or "add players manually"). The step definition for that step will then contain all of these actions on the system (click this, fill that, etc). You can also use what we call "helper methods" from your step definition; for example create a method that will navigate to a certain page, and call that method with the relevant page to go to from your various step definitions.
That way your scenarios will describe the intended behaviour of the system, or what the user is supposed to be allowed to do (or not do).
Also, from the examples you've provided it is not clear to me what it is you are testing/asserting. I've always found it helpful to use "Given/And" to set up the original state of the system, "When/And" for the actions to be performed that you want to test the outcome of, and "Then/And" to verify the expected result.
The title of the scenario should clearly describe what it is the scenario tests for.
From your example, I've assumed that you are testing that a user is able to add players either from a file or manually. In that case, the scenarios could look something like the following:
Scenario: User is able to add players from a file
Given a user who is logged in
And the user has selected "country"
When the user attaches "files"
And adds a comment about location
Then the players are added
And the comment is saved
Scenario: user is able to add players manually
Given a user who is logged in
And the user has selected "country"
When the user adds players manually
And adds a comment about location
Then the players are added
And the comment is saved
In the example above, I am also assuming that the following steps:
And add players manually
And User picks players
And User clicks on a player
And does the settings
are actually all (always) needed to add players manually, so all of those actions would be performed in the one step "And add players manually" (either by implementing them all in one step, or calling several helper methods from that one step).
By describing the behaviour like this it is much clearer what you are testing in each scenario and what the expected behaviour of the system is.
Also, it will lead to way less duplication of "steps" (as was your original question, I believe).
We have a web app composed of several pages containing links of data retrieved from database. Upon clicking one link[data], the user should be directed to another page. For navigation between pages, we have used breadcrumb. The breadcrumb is stored in redux store. Currently, when the user tries to ctrl+click or open link in new tab, we managed to use single store across multiple tabs. Hence, if the user opens 3 separate links [data] in new tabs, the updates made on the breadcrumb affect previously opened tabs when these tabs/pages are refreshed. For example:
In homepage, I have these links:
Data_1
Data_2
Data_3
Current breadcrumb in the homepage is like this:
HomePage/
Once the user opens Data_1 in new tab, the expected breadcrumb in the new tab is:
HomePage/Data_1/
Similarly, if the user tries to open Data_2 and Data_3, in new tabs, the breadcrumbs should appear as follows for tab 1 and tab 2, respectively:
HomePage/Data_2/
HomePage/Data_3/
In the current implementation, I managed to update the state of breadcrumb whenever new links are opened such that breadcrumb[0] would be equivalent to HomePage while breadcrumb[1] was initially Data_1, then became Data_2, and lastly Data_3. Hence, the last value of breadcrumb[1] is Data_3 since that's the last opened link. My problem is that whenever the user refreshes previously opened tabs/pages corresponding to Data_1 and Data_2, since they are all using a single store and breadcrumb[1] has been changed to Data_3, the breadcrumbs in Data_1 and Data_2 pages also become Data_3.
In this case, I can just think of using multiple stores since I perceive that it could be the only solution given my use case. Meanwhile, I can't find any sufficient documentation online regarding using multiple stores in redux. Maybe I can pass the store to the next page in params...? something like that
Can someone please help. Thanks in advance.
To emulate per-tab same site persistency, I would, right before the page is about to be refreshed (window.beforeunload or similar)
1 - Write to localStorage about my breadcrumb
2 - Refresh
3 - Read from localStorage about my breadcrumb to initialize myself properly (so the data here SHOULD be mine because i just wrote it)
4 - remove breadcrumb information from localStorage (to prevent other tabs from reading it)
Now, you still have the case where the user just closes the tab, so you would have stale data about the breadcrumb in your localStorage. You can add a little expiration mechanism (you might consider that data in the localStorage older than 10 seconds is stale and just pretend it isn't here and delete it at step 3.) Cookies would work pretty much the same, with a built-in expiration mechanism.
React router has very cool feature: if you have a list of items (Instagram for example) and if you click on one item, content opens in modal/overlay but if you copy-paste the link to new tab/window or share the link with a friend for example, it opens in its own page.
I would love to use this feature but I need to find a custom solution..
My posts are very data heavy
I've split posts data into 2 tables in database
1st is very lightweight containing essential data: 4-5 columns
2nd table is very heave, ~30 columns
When user uses search filter, list updates only with data from 1st table
If user clicks on post, it will open in a modal/overlay
I will recycle the data I already have (from 1st table) and also get rest of the data from 2nd table
However, when user shares the link or opens it in new tab/page, data from 1st table is not present. I would need to integrate a conditional logic:
If post opens in list view (modal/overlay), only get additinal 2nd table data
If it's opened in a new tab/window in its own page, get all the data, 1st table included
How could I integrate this with React router? Has anyone already tried it? This would also allow to use different layout/components when user opens item in page view. Is there a way to check it?
Or is there a flaw in my logic? I imagine list would update very fast because it doesn't require huge amount of data and also would modal/overlay because it recycles some of the data.
I read all the docs, also searched online - didn't find anything.
Modals in react router are great. I've used the pinterest example and adapted it to my own needs.
Ensure you do your check on state.modal===true in a master layout component to give you the modal styling.
you'll need to check if table 1 stuff is present in your state and dispatch an action to trigger the async call in componentDidMount. You should be fetching table 2 in all scenarios.
I'm trying to use AngularJS and Angular-UI-Bootstrap to create a WebApp but as I'm rather new with all this, I need some help. I'm using ng-repeat and an array to create a Tab interface.
Depending on an action in the first Tab, a second Tab is added to the interface or should be refreshed if it's already open. I've got the Tab working and have a check to make sure it isn't added again when it's already open.
The basic structure is the following: One controller (TabController) to control the Tab interface, and one controller (Tab1 and Tab2) for each Tab that's added to the interface.
Now, I have the following problem, the content of the second tab should change depending on data changed in the first tab. When the user confirms the data in the first tab, I execute a function in the TabController (to add / activate the second tab) that also changes some data in the scope. I can't seem to be able to detect the change in this data in de second tab, I've created a watch for the field, but it's only fired the first time the tab is loaded. If I use the field itself, the data is changed, but the watch doesn't fire. Anyone got an idea how I can get this to work? The data that changes should be used to make changes to other information, that's the reason I'm trying to use a watch and execute a function...
I've created a Plunker that should demonstrate in a simple example what the problem is and what I'm trying to do (I hope...)
DEMO
On the first Tab, there is a button to add a second tab (or activate it), as an example, I just increase a count that's displayed on both tabs. On the second tab, I have a local field on the scope that I fill with the global field using a $watch.
When starting the first time, the global count is one, after adding the second tab, both the global as the local count on the second tab are 2. When I go back to the first tab and click the 'Add tab' button again, the global count on both tabs is 3, but the local count on the second tab remains 2 and the watch isn't fired.
As I'm new to Angular (and web programming) I might be trying to do something that goes against all the best practices, so if someone has a better / different way to do what I'm trying to do, feel free to make any suggestions.
Your watch expression was incorrect, the correct expression would be
$scope.$watch("tabCount",
function() {
$scope.localCount = $scope.tabCount;
})
}
instead of
$scope.$watch($scope.tabCount,
The first one means you want to watch on a variable tabCountdefined over the scope.