Is there any tool for testing that layout for a website dont generate visual bugs?
Im working on a site where sometimes we can see visual bugs. Example:
There is a page where objects are listed. The listing is divided in pages.
Last time, after browsing a few page, I saw that a particular page showed a visual bug, in this case the table became wider than normally.
In this case the problem was that one of the td-tags contained too much text which made all the table become wider.
Maybe this can sound like a crazy thing? But my client thinks there is a way to set up this kind of tests and acording to him Jenkins can be used for this purpose.
There is a way to automate layout testing of a web application using Galen Framework. This tool has its own language and is very easy to learn and understand. It is a Selenium based and you can run test in Selenium Grid, Sauce Labs if you want to test your application in different browsers.
This tool gets the location of specified element on page and check them relatively to each other.
Example: if you want to check that menu pane is below header and stretches to the width of a browser and has 50 pixel height, you can do it like this:
menu
below: header 5px
width: 100% of screen/width
height: 50px
This tool can also be used to test responsive designs.
You can find complete documentation on official website http://galenframework.com
The best part is you can even create JAVA Tests. Galen JavaScript API is also available along with the sample projects in github.
Again, test(s) written once can be used at multiple phases of application lifecycle.
Related
I have recently implemented some data visualisation using d3.js, I'm now trying to get this to work for Internet Explorer browser versions 7 and above. The common suggestion to get this to work, is to combine d3.js with raphael.js, which is a cross browser graphics library.
There already seem to be some implementations of such libraries such as
r2d3.js :
d34raphael.js :
I'm trying to understand if these existing implementation already have d3's capability of data binding and the physics implementation of the force layout to implement something as simple as this d3 example : http://bl.ocks.org/1095795
I have been looking into this too and a number of options came up.
Chrome Frame - A browser plug-in that actually uses chrome underneath, meaning SVG just works. This is great if you're able to deploy plugins to the browser, for a real commercial environment however this may not be possible.
SVG Web - The aim is it bring SVG to all browsers. It looks like a fairly large project, one that's had Google's input. This doesn't however work out of the box with D3 though I don't know much about the issues.
D34Raphael - You've mentioned this one, I found again it doesn't work out of the box. Check the project out on GitHub, there hasn't been any commit activity in months and there's some pull requests "first pass on trying to get support for .on() required for event binding". If it doesn't support events, is that an issue to you? I'd generally keep away from this one.
R2D3 - Again another one you mentioned. I took the Sankey example from the D3 website and had to make a few changes to get it working. The main things I couldn't get working (Drag Events, Groups - though can use an alternative). It took about a day of effort to get the example working in IE8 and I believe is in a useable state. The project on GitHub is also much more active, the developer is committing, pulling work in and is very active on discussions etc. This gets my vote.
How can multiple developers work on the same website (CSS, JavaScript, ASP.NET).
We use SVN as source control, but the problem is more in regards of testing and general workflow.
I know we could do unit tests and we have for our API, but I don't see how we can do unit testing for our frontend?
We get a lot of problems in the frontend like:
Developer 1 changes CSS and it messes up CSS for developer 2.
Developer 1 changes JavaScript and components developer 2 made stops working.
Developer 1 removed an ID or a CSS class in C# (code behind) and CSS styling is lost or JavaScript stops working.
It's basically things of that nature.
What we do now is manually test everything in all major browsers and we spend too much time on that.
Any good suggestions on how we can improve our way of working? Keep in mind that it's a website and we are struggling with problems related to that.
This is a management issue rather than a workflow issue.
You need to be proactive at managing the situation and be tough.
You have a source control system in place, what you need to do is:-
Enforce day end (or more frequent if preferred) check ins.
Rollback work if it doesn't work. You have to be tough on this point to ensure the developers understand that you mean it.
You need to actively communicate the above to your team to make sure they understand the new work procedures.
It'd only take a few weeks for it to sink in, after that you can relax the controls.
Introduce releases/iterations/milestones; and publish them only from the repo.
Can you not possibly break the site areas up into segments and assign developer responsibilities to each, even if it means sandboxing the "base" code of the site (framework / main CSS / main JavaScript) and assigning a specific responsibility to it? You can then task developers to keep their CSS / JavaScript separate from the main files and merge them before testing and release.
We've had similar problems where I work and this approach seemed to sort it out for the most part. For each segment we built we created a new folder in each of the respective projects (DAL / BL / Presentation), based on the functionalities / modules / segments, each with their own site content (JavaScript / CSS), but still making sure that some generic styling and JavaScript being available to all developers.
An official Agile project management methodology (like Scrum) has huge benefits in an environment like this, as you get to discuss these issues on a daily basis and, if over-arching requirements for new CSS and JavaScript are identified by all developers, it can be integrated into the site's base content.
I have a django app and I would like to display some graphical data visualization to my users. I am looking for an easy-to-use package that would allow me to add graphs and widgets.
The kind of widget I want to build is a kind of speedometer dial that is red at one end and green at the other. As a user completes their job over the day, the graphic/widget adjusts itself. The dial moves from red to green.
I also want an S-curve graphic that shows the cumulative amount of work accomplished against planned. That is kind of an x/y line plot.
My question are: How easy is this to implement? Are there any add-ins libraries or packages that do this already? I am trying to keep my entire application open-source. I've seen a couple subscription services that do this type of thing, but I can't stomach the cost.
I don't mind using ajax or jquery to implement such a thing, but I would like the most elegant and maintainable solution.
Any advice or examples on how to tackle this project?
There are lots of good javascript libraries these days, but all require some effort to learn how to use. I have not found one that really is easy to use, I guess because everyone wants something different. My general experience has been the more effort you put into learning them, the more you get out.
Google has gauges: http://code.google.com/apis/chart/interactive/docs/gallery/gauge.html
Also
http://www.flotcharts.org/
http://philogb.github.com/jit/
http://www.highcharts.com/
http://www.jqplot.com/
Or really take control:
http://mbostock.github.com/protovis/
As first, see the following grid (https://www.djangopackages.com/grids/g/dashboard-applications/) on djangopackages.
Not sure if that's exactly what's asked for, but you might take a look at django-dash (https://pypi.python.org/pypi/django-dash).
It allows each user to make his own dashboard (from plugins available). Those dashboards can be made public.
Some screenshots (http://pythonhosted.org/django-dash/#screenshots).
It's modular and plugin based, so you need to make a plugin and widgets for every specific feature (in this particular case - the speedometer plugin and widgets for it). Each plugin/widget can include own JS/CSS when being rendered.
See the following chart usage examples:
D3.js integration examples (https://github.com/barseghyanartur/django-dash/tree/master/example/example/d3_samples).
Polychart2.js integration example (https://github.com/barseghyanartur/django-dash/blob/master/example/example/bar/).
protovis is no longer under active development, but they started a new poject: http://d3js.org/
You may choose from these packages:
https://www.djangopackages.com/search/?q=dash
I just started to look into Sitecore and I was wondering if anyone can help me enlighten what / how it is exactly from a developer perspective.
I've gone through bunch of their documentation and also their SDN - seems to me so far most of them are just drag/drop click here and there through their interface (ie. through their "Sitecore Desktop") with very minor actual programming.
Is this true? or are their actual C# / ASP.Net programming behind the scene to implement business logic and such?
I went through their basic tutorial (creating basic site for Product), and like I mentioned above, it's all mostly done through their interface without any real programming - as opposed to working with the ASP.Net MVC3 Music Store tutorial where you can see some C# programming.
Thanks!
A Sitecore developer should have the most intense and deepest understanding of Sitecore in general. Developers need to understand the CMS user's perspective (i.e. content editor's POV), they need to understand the architecture of content within the content tree, and they need to know the code, which they build. A developer should have the most intimate knowledge of a Sitecore solution because you need to know the architecture to know how to code. And to know the architecture means you know how content editors will interact with the content.
Architecture
Sitecore is a souped up database. Think of it like that. You can architecture a site how you want. But once you start to learn the principles of Sitecore architecture and best practices you'll notice a pattern. Everything in the content tree is an item. The model for each item (called a template in Sitecore terms) is defined by an architect (which is often often a developer). In fact, even if there's a separate person for the architect role, they likely have developer knowledge as architecture defines the way things are developed. In fact, the architecture is one of the most important things.
Code
Code is broken down into various types, but in its simplest form there are two main things: layouts and sublayouts.
Think of a layout as what a normal a ASP.NET application uses a MasterPage for. In Sitecore, a layout is actually a ASPX WebForm, but it acts as a master page. Some examples of layouts you could have on your site are: One Column Layout, Two Column Layout, Print Layout. These would respectively translate to a header and footer with one main content area, a header and footer with a main column and side bar, and a print-optimized layout with maybe a logo and just main content.
Sublayouts are all of the little components that make up a page. Examples include: main navigation, a promo box in your side bar, a list of 5 recent news pieces, a CTA for a promotion, a sidebar slide show, etc. These components could be modular and moved around by content editors, or they can be fixed within the location of layouts, e.g. a promo box could always appear in the sidebar of the Two Column layout as a business rule defined in the code.
To answer your question about is there actual coding, yes. You write code using ASP.NET controls for Sitecore and Sitecore's C# API to access data that is populated into the templates on each item. So, if you had an item for a page that had a page title for the title tag, your code would use the Sitecore API to access the field "Title Tag" from the template (remember a template in Sitecore speak is a data model) in Sitecore.
Coding For Sitecore
I'd say there are two approaches to coding. I believe you identified one of them, which is using the internal tools within Sitecore's interface. Sitecore has a section called Developer Center that lets you create layouts and sublayouts. Frankly, compare this to using Visual Studio in Design Mode all of the time. I have never once used the Developer Center to do my coding. Instead, I code in Visual Studio which is the most common technique for people to code for Sitecore (at least I think it is). Now if you're wondering, how does the coding connect to Sitecore's data... well the answer is within Sitecore. There's a section of the tree called Layouts. In here are the names of your layouts and sublayouts. Each layout and sublayout item has a path that maps to either a ASPX WebForm or ASCX User Control, respectively. This is how the code on the file system that you write in Visual Studio actually gets used by Sitecore. These layout and sublayout items are then used via the Presentation > Details tabs for each item in Sitecore.
Beginners
One of the hardest things with Sitecore is the learning curve. I've been using Sitecore for years now and love it. In fact, its all I really do. It's by far my favorite CMS as its completely customizable and very developer-friendly. Sitecore recommends that new developers take the developer training classes so they can basically explain what I explained above in an actual training curriculum. In this training you will learn the architecture, and then how the code connects to it. Training involves hand-on architecture work within the content tree and hands-on coding. The recommend training courses for new developers are:
Getting Started With Sitecore Development: Sitecore XP 8 Website Development for .NET Developers (4 days, certification)
Further Training for Sitecore Certified Developers - Sitecore XP 8 Livefire MVC Workshop (1 day, no certification)
Sitecore is an ASP.NET application. That means that you can write any code you like. Our team creates all of the Sublayouts (ASCX files) and Layouts (ASPX files) ourselves in Visual Studio, not the editors built in to Sitecore.
Some installations of Sitecore that I have seen barely rely on the CMS to do the rendering. Instead values are pulled via the codebehind as if Sitecore was just a database. That can work fine in some situations.
The most impressive Sitecore instances use all of the available tools that the developer has access to. Using the Sitecore tools the way they were designed to be used allows some pretty impressive editing options for the (often non-technical) content editors.
For example: Using a Sitecore Fieldrenderer instead of just a placeholder or label will not only automatically render content appropriately (whether they are images or rich text), but it will allow the content editor to edit the content right on the web page as opposed to the only on back end that all CMS systems have.
Workflow is another killer feature for a customer that is the right size to afford Sitecore. It lets you build an approval process for items in the tree. That way legal, marketing and the graphics team call all sign off on a new page before it goes live. Then when all of the approvals are finalized, the site publishes automatically.
To sum up: Sitecore is a .NET application, you can code whatever you want. That means you should focus on the CMS features and make sure it is a good fit for you from a content editor perspective and a financial perspective.
Sitecore is in most cases just drag & drop as you've described in terms of content authoring but to actually turn this content into a webpage you need to implement layouts, sublayouts and so on.
Layouts are generic ASP.NET pages (aspx), sublayouts are just web controls (ascx) and if you prefer you can also use XSLT to generate HTML but it's useful only for basics (Sitecore only supports XSLT 1 at this moment). These ASP.NET controls are more less the same as standard web forms controls with code behind and so on. The difference is that Sitecore is your datasource and it gives you an APIs to access all relevant applications.
But Sitecore APIs also goes beyond that and allows you programatic access to virtually any component of the framework. The APIs are well docummented and quite easy to understand and they can be used for more complex scenarios.
Latest version of Sitecore (6.4) allows you to also use MVC framework for layouts/sublayouts creation if you don't like web forms that much.
Layouts and sublayouts are a great way todo any customizations from a coding standpoint but there is a third way that is not mentioned here. We call it sitecore extensions. I often find that to meet customer requirements, creating custom assembly's for workflow actions or template commands is the only way.
For example, a standard email notification upon entry into a workflow state only allows for you to apply server, recipient, description etc.. to action item field. In our case these values constantly change so we need to be more dynamic. A custom assembly applied to the action allows us the flexibility to do a number of things that the standard action will not. Another example was that we needed to have a treelist in an item scroll to and highlight the current item. The way todo this was to override the core treelist action with our custom assembly.
Keep in mind that adding alot of code to the layout (which could be a master page for a ton of pages) ramps up the runtime overhead.
From a UX perspective, Sitecore is impractical, overpowered and too complex to be effectively implemented for teams with typical content contributors and editors. No thought has been put into streamlining content creation or simple page template maintenance. I would never recommend Sitecore to a team without:
HTML authoring/editing skills
FTP concepts & Site tree understanding
Data management skills
The system is built for developers, with users as a very distant after-thought. In my experience, it offers a huge number of benefits — being a usable system for every-day content authors is not one of those benefits. The system is so modular and over-managed, it forces users on every level to make decisions that only complicate otherwise simple operations. Content publishing is extremely modular, and a big benefit for developers; it is a catastrophe for everyday users.
If you're a developer, Sitecore is a wonderful building environment. It's powerful and flexible.
If you're a user, Sitecore is task-heavy and offers the steepest learning curve I've ever encountered with a CMS. UAT has been a nightmare.
How do you unit test a large MFC UI application?
We have a few large MFC applications that have been in development for many years, we use some standard automated QA tools to run basic scripts to check fundamentals, file open etc. These are run by the QA group post the daily build.
But we would like to introduce procedures such that individual developers can build and run tests against dialogs, menus, and other visual elements of the application before submitting code to the daily build.
I have heard of such techniques as hidden test buttons on dialogs that only appear in debug builds, are there any standard toolkits for this.
Environment is C++/C/FORTRAN, MSVC 2005, Intel FORTRAN 9.1, Windows XP/Vista x86 & x64.
It depends on how the App is structured. If logic and GUI code is separated (MVC) then testing the logic is easy. Take a look at Michael Feathers "Humble Dialog Box" (PDF).
EDIT: If you think about it: You should very carefully refactor if the App is not structured that way. There is no other technique for testing the logic. Scripts which simulate clicks are just scratching the surface.
It is actually pretty easy:
Assume your control/window/whatever changes the contents of a listbox when the user clicks a button and you want to make sure the listbox contains the right stuff after the click.
Refactor so that there is a separate list with the items for the listbox to show. The items are stored in the list and are not extracted from whereever your data comes from. The code that makes the listbox list things knows only about the new list.
Then you create a new controller object which will contain the logic code. The method that handles the button click only calls mycontroller->ButtonWasClicked(). It does not know about the listbox or anythings else.
MyController::ButtonWasClicked() does whats need to be done for the intended logic, prepares the item list and tells the control to update. For that to work you need to decouple the controller and the control by creating a interface (pure virtual class) for the control. The controller knows only an object of that type, not the control.
Thats it. The controller contains the logic code and knows the control only via the interface. Now you can write regular unit test for MyController::ButtonWasClicked() by mocking the control. If you have no idea what I am talking about, read Michaels article. Twice. And again after that.
(Note to self: must learn not to blather that much)
Since you mentioned MFC, I assumed you have an application that would be hard to get under an automated test harness. You'll observe best benefits of unit testing frameworks when you build tests as you write the code.. But trying to add a new feature in a test-driven manner to an application which is not designed to be testable.. can be hard work and well frustrating.
Now what I am going to propose is definitely hard work.. but with some discipline and perseverance you'll see the benefit soon enough.
First you'll need some management backing for new fixes to take a bit longer. Make sure everyone understands why.
Next buy a copy of the WELC book. Read it cover to cover if you have the time OR if you're hard pressed, scan the index to find the symptom your app is exhibiting. This book contains a lot of good advice and is just what you need when trying to get existing code testable.
Then for every new fix/change, spend some time and understand the area you're going to work on. Write some tests in a xUnit variant of your choice (freely available) to exercise current behavior.
Make sure all tests pass. Write a new test which exercises needed behavior or the bug.
Write code to make this last test pass.
Refactor mercilessly within the area under tests to improve design.
Repeat for every new change that you have to make to the system from here on. No exceptions to this rule.
Now the promised land: Soon ever growing islands of well tested code will begin to surface. More and more code would fall under the automated test suite and changes will become progressively easier to make. And that is because slowly and surely the underlying design becomes more testable.
The easy way out was my previous answer. This is the difficult but right way out.
I realize this is a dated question, but for those of us who still work with MFC, the Microsoft C++ Unit Testing Framework in VS2012 works well.
The General Procedure:
Compile your MFC Project as a static library
Add a new Native Unit Test Project to your solution.
In the Test Project, add your MFC Project as a Reference.
In the Test Project's Configuration Properties, add the Include directories for your header files.
In the Linker, input options add your MFC.lib;nafxcwd.lib;libcmtd.lib;
Under 'Ignore Specific Default Libraries' add nafxcwd.lib;libcmtd.lib;
Under General add the location of your MFC exported lib file.
The https://stackoverflow.com/questions/1146338/error-lnk2005-new-and-delete-already-defined-in-libcmtd-libnew-obj has a good description of why you need the nafxcwd.lib and libcmtd.lib.
The other important thing to check for in legacy projects. In General Configuration Properties, make sure both projects are using the same 'Character Set'. If your MFC is using a Multi-Byte Character Set you'll need the MS Test to do so as well.
Though not perfect, the best I have found for this is AutoIt http://www.autoitscript.com/autoit3
"AutoIt v3 is a freeware BASIC-like scripting language designed for automating the Windows GUI and general scripting. It uses a combination of simulated keystrokes, mouse movement and window/control manipulation in order to automate tasks in a way not possible or reliable with other languages (e.g. VBScript and SendKeys). AutoIt is also very small, self-contained and will run on all versions of Windows out-of-the-box with no annoying "runtimes" required!"
This works well when you have access to the source code of the application being driven, because you can use the resource ID number of the controls you want to drive. In this way you do not have to worry about simulated mouse clicks on particular pixels. Unfortunately, in a legacy application, you may well find that the resource ID are not unique, which may cause problems. However. it is very straightforward to change the IDs to be unique and rebuild.
The other issue is that you will encounter timing problems. I do not have a tried and true solution for these. Trial and error is what I have used, but this is clearly not scalable. The problem is that the AutoIT script must wait for the test application to respond to a command before the script issues the next command or check for the correct response. Sometimes it is not easy to find a convenient event to wait and watch for.
My feeling is that, in developing a new application, I would insist on a consistent way to signal "READY". This would be helpful to the human users as well as test scripts! This may be a challenge for a legacy application, but perhaps you can introduce it in problematical points and slowly spread it to the entire application as maintenance continues.
Although it cannot handle the UI side, I unit test MFC code using the Boost Test library. There is a Code Project article on getting started:
Designing Robust Objects with Boost
Well we have one of these humongous MFC Apps at the workplace. Its a gigantic pain to maintain or extend... its a huge ball of mud now but it rakes in the moolah.Anyways
We use Rational Robot for doing smoke tests and the like.
Another approach that has had some success is to create a small product-specific language and script tests that use VBScript and some Control handle spying magic. Turn common actions into commands.. e.g. OpenDatabase would be a command that in turn will inject the required script blocks to click on Main Menu > File > "Open...". You then create excel sheets which are a series of such commands. These commands can take parameters too. Something like a FIT Test.. but more work. Once you have most of the common commands identified and scripts ready. It's pick and assemble scripts (tagged by CommandIDs) to write new tests. A test-runner parses these Excel sheets, combines all the little script blocks into a test script and runs it.
OpenDatabase "C:\tests\MyDB"
OpenDialog "Add Model"
AddModel "M0001", "MyModel", 2.5, 100
PressOK
SaveDatabase
HTH
Actually we have been using Rational Team Test, then Robot, but in recent discussions with Rational we discovered they have no plans to support Native x64 applications focusing more on .NET, so we decided to switch Automated QA tools. This is great but licensing costs don't allow us to enable it for all developers.
All our applications support a COM API for scripting, which we regression test via VB, but this tests the API no the application as such.
Ideally I would be interested on how people integrate cppunit and similar unit testing frameworks into the application at a developer level.