How to avoid broken CSS path/XPath references in automated UI tests?

I have a set of TestNG tests that I use to test a web based UI.

For example a typical test would click on different menus and buttons and assert that the outcome is the one we expect.

These tests also use Selenium in the background. I have my test in one class, and a model of the web page in another class.

To get a reference to a UI component (button, menu etc) in the web page I use a CSS or XPath selector. This is hard coded in the model class. To get an object representing a UI component I call a get method in the model class which returns an object for the UI component using the css selector. Then using that object I can click, select, deselect or do any operation on the component.

This all works fine except if the css selector changes.

Is there a way to avoid this?

I was thinking if I could repeat a test manually by going through each step or click, and record the css selectors for the elements used this would be quicker than debugging the test, finding out what the new element name is in the page/javascript manually and updating the model css selectors.

Or is there a way of linking the web page development and automatically updating the model code for the change in the page, so that the change wouldn't break the test?

Thanks!