Select Page
Web Application testing – install Siege on Linux (or Mac OSx)

Web Application testing – install Siege on Linux (or Mac OSx)

Siege is a great tool for performance and load testing your web application. I’ve been using it for the past 6 months to test WordPress websites along with other web apps that we’ve been building.

Use it to straighten out any kinks with applications like WordPress, learn if you’re server and database is flakey or prove that your CDN is super.

Siege testing vs Apache Benchmark

If you’ve used Apache Benchmark in Mac OSx or Linux then you’ll already have an idea what Siege can do. Siege is better then AB as you can create a user journey for it to follow or give it a list of pages on your website to randomly hit. The configuration file gives you a lot lot lot more then AB.

Siege testing is not load testing

Nothing beats a good Siege – but in reality if you really want to put your site under stress then you’ll need to switch to your own server setup with jMeter or checkout Blazemeter.

Finally .. you might as well give up on performance testing with Siege or Apache benchmark if you Siege server and Web App are on the same internal network / IP address range / co-located in the same data-centre.

Running Siege

Once you’ve started using Siege you won’t look back. It’s quite verbose and it’s great to watch it running through its test.

DAMIEN-RED:~ damien$ siege -c 10 http://damien.co
** SIEGE 2.70
** Preparing 10 concurrent users for battle.
The server is now under siege...
HTTP/1.1,302, 0.60, 28,/,1,2012-01-25 21:59:53
HTTP/1.1,302, 0.60, 28,/,1,2012-01-25 21:59:53
HTTP/1.1,302, 0.60, 28,/,1,2012-01-25 21:59:53
HTTP/1.1,302, 0.63, 28,/,1,2012-01-25 21:59:53
HTTP/1.1,302, 0.66, 28,/,1,2012-01-25 21:59:53
HTTP/1.1,302, 0.69, 28,/,1,2012-01-25 21:59:53
HTTP/1.1,200, 0.05, 7146,/steven-mackintosh-the-changing-man/,1,2012-01-25 21:59:54
HTTP/1.1,200, 0.20, 7146,/steven-mackintosh-the-changing-man/,1,2012-01-25 21:59:54

and at the end … Siege gives you a nice sumary

Lifting the server siege... done.
Transactions: 534 hits
Availability: 91.60 %
Elapsed time: 84.10 secs
Data transferred: 1.83 MB
Response time: 3.41 secs
Transaction rate: 6.35 trans/sec
Throughput: 0.02 MB/sec
Concurrency: 21.65
Successful transactions: 537
Failed transactions: 49
Longest transaction: 29.90
Shortest transaction: 0.05

How to Install Siege

Centos

If you’re on the latest Centos with yum install you need to type

sudo yum install siege

Ubuntu

If you’re on the latest Centos with yum install you need to type

sudo apt-get install siege

Get started with Siege

From your CLI / Terminal you’ll want to generate a config file

siege.config

this generates a hidden config settings file. Then you’ll use your favourite editor to change Siege the way you like it.

nano .siegerc

The I suggest you put something under Siege

siege -c 10 http://example.com

This will generate a performance test up to 10 consecutive users. Remember some websites struggle to get more than 2 consecutive users so go easy.

Hints: Making things tough

  1. Follow the User Manual and create a urls.txt file with a list of pages on your website.
  2. Make sure you have Webmin or Munin running so you can visualise the pain you’re inflicting on your poor web app.
  3. Run the siege for 60 minutes with something like 20 users.
  4. Run the siege for 200, 500, 1000 consecutive users. Watch your server load average go up and your free memory disappear.

Linkage

Web Application & Automated Testing – Firefox & Selenium IDE

Web Application & Automated Testing – Firefox & Selenium IDE

I’ve just getting started automated testing with Selenium for a number of web app projects that we’ve been developing lately. My background has been all about managing the project, test plans and manual test execution, so the learning curve is a bit steep.

Automated testing fits in well with Agile and Scrum project management. Using Selenium IDE you can first create the test case, try it out manually and then when development is finished, you just run the automated test. If the test automation completes without errors – then you can thank your developers for a job well done.

Selenium IDE is not Selenium

Well it is .. and it isn’t … Selenium IDE is like a Windows 95 macro-recorder as it copies your mouse clicks and keystrokes in Firefox and then repeats it for you.

Selenium is it’s big brother and runs as a standalone java server (called web driver) and you need to know some java or other languagues to use it.

Firefox runs Selenium IDE

Selenium IDE is a Firefox browser extension, you need to have installed Selenium IDE: http://seleniumhq.org/projects/ide/, you can’t automatically use Selenium IDE to test chrome and internet explorer.

I’d also recommend you install Selenium Flow Control which will allow you to repeat, loop or iterate some of your test case.

 

Axure – more on responsive designs

Axure – more on responsive designs

Axure is a really great tool for generating an interactive prototype and doing something more amazing with wireframes.

Need help with Axure? Support, Design & Training Get in contact

I’m one step closer to something resembling the current state of responsive and I’ve updated my example of responsive design …. http://share.axure.com/VLO0IZ/

If you read anything about responsive or mobile design then check out Luke Wroblewski as he proposes 4 device screen widths to design for.

Using a centred layout with Axure you can cover ‘all’ devices larger then a 1024 /  960 grid (if that’s what you use) — so that’s 2 devices.

That then leaves only 2 designs to really work up:

  • 768w (for Tablets and iPad)
  • 320w (for iPhones)

If you’re not doing mobile ‘optimised’ – then you may only need 1 alternative layout 🙂

(which opens a much bigger can of worms)

Links

Responsive Example

Axure – Responsive layout & browser width

Axure – Responsive layout & browser width

I’ve been playing around with scroll spy and re-creating this effect in Axure. Now, I’ve started to tackle responsive layout and browser width.

Axure is a great tool for making wireframes come to life … seriously. When you’re building a web or mobile application you’re better off with a complete clickable prototype then leaving your client guessing.

Responsive layout in Axure

This is a bit more complex – but start with a Dynamic Panel and (using the newer Axure v6.5b) select pin to browser. Make sure you pin it on the right hand side.

Then using scroll-spy / aka crazy flicker and some image map areas – you can detect when the browser width changes.

Hints – Next Steps?

The tricky part is columns and other objects that are stuck to the page. A way around this is to use a different set of pages for the narrower widths.

Links

Demo

What do you think? have you tried doing responsive designs in Axure?

Axure Sticky Nav & Scroll Spy part 2

Axure Sticky Nav & Scroll Spy part 2

I wanted another go at the scroll spy and sticky nav bar effect in Axure … which I previously wrote about. Reason being I like scroll spy and wanted to show a more complex and sensitive version.

Axure Scroll Spy, Sticky Nav & Pin to Browser

This latest Axure scroll spy example show

  • Header which sticks at the top
  • Navbar which becomes sticky when you scroll
  • Buttons that change selected state while you scroll

Image Map Regions

I’ve make a lot of use of Image Map Regions to provide ‘feedback’ as you scroll. The important thing with image maps for anchor points is that sometimes they need to be positioned differently to your anchor or scroll to points. Otherwise you can find your browser unexpectedly not scrolling to where you intend.

The other point I should make is that Axure needs an OnScroll behaviour rather than needing a feedback ‘tool’ like what Paul @ Axure  calls his crazy flicker.

Get the latest Axure 6.5 beta – Word Specification with OnPageLoad

I’d also like to suggest that if you have any problems generating Word specification documents that you first disable Crazy Flicker from OnPageLoad – Specifications and screenshots usually apply the OnPageLoad events. The Axure support team did fix an issue in the latest v6.5 beta which I found when using crazy flicker and OnPageLoad. So I’m only suggesting that if you find a problem with Word Specification documents – check you have the latest Axure beta release.

Links

Demo

Download

Creative Commons Share a Like by Attribution

Yes, it’s a free download and can be used under Creative Commons –  CC-Attribution and you can use it for commercial and non-commercial projects. Just let me know please.

Axure – Create Scroll Spy and Sticky Nav Bars like Twitter Bootstrap

Axure – Create Scroll Spy and Sticky Nav Bars like Twitter Bootstrap

Have you seen Twitter Bootstrap and liked scrollspy javascript? Perhaps you want to use it in Axure to create floating navbars and sticky toolbars?

Are you impressed by Twitter Bootstrap? Some are, some aren’t – but I don’t know what the fuss is about – if you’ve got an amazing framework that is responsive and ready to go for your next startup – what’s not to love about it? It saves some design time and some development time.

Crazy Flicker – detecting scrolling

Following on from this post about detecting scrolling and showing nav bar changes in Axure – I thought it should be possible to create the scrollspy effect and also to change navbars.

Thanks to Paul’s suggestion of image map regions and what he calls Crazy Flicker it’s very easy to detect scrolling and move dynamic panels.

The results are great!  … see the little example

How to do it?

  1. Make a nice nav bar in a Dynamic Panel and using Axure 6.5 new Pin To Browser set the Nav Bar to always be on top.
  2. Make a nice tool bar – and make 2 states – one state is the full-width sticky nav the other the toolbar.
  3. Make your own Crazy Flicker (a dynamic panel with an image)
  4. Add image map regions like top and bottom
  5. Programe the Dynamic Panel Crazy Flicker using onShow to detect what image map the Nav Bar is on top of and show the right dynamic toolbar state
  6. Generate your prototype 🙂

Problems?

  • No it’s not that easy – there is a lot of trial and error to get the top nav bar in front of things (watch out if you use Masters and the Navbar is in the background.
  • Masters — don’t make it all work then change your Dynamic Panels to Masters – it will break all your programming
  • Label everything – so when you program buttons and navbar changes, the effect shows up on the right widget!

Links

Demo

Have you tried this?