1151 Я знаю, что это тридцать третий ответ на этот вопрос, но я думаю, что оно того стоит, так что здесь. Это решение только для CSS со следующими свойствами:
transform: scaleY(0)
), поэтому он делает правильные вещи, если после разборного элемента есть контент. height: auto
) состоянии все содержимое всегда имеет правильную высоту (в отличие, например, если вы выберете max-height
], что оказывается слишком низким). А в свернутом состоянии высота равна нулю, как и должно быть. Вот демонстрация с тремя складными элементами разной высоты, которые используют один и тот же CSS. Возможно, вы захотите нажать «Полная страница» после нажатия «Запустить фрагмент». Обратите внимание, что JavaScript включает только CSS-класс collapsed
, измерение не требуется. (Вы можете сделать эту точную демонстрацию вообще без JavaScript, используя флажок или :target
). Также обратите внимание, что часть CSS, которая отвечает за переход, довольно коротка, и HTML требует только одного дополнительного элемента-оболочки.
$(function () {
$(".toggler").click(function () {
$(this).next().toggleClass("collapsed");
$(this).toggleClass("toggled"); // this just rotates the expander arrow
});
});
.collapsible-wrapper {
display: flex;
overflow: hidden;
}
.collapsible-wrapper:after {
content: '';
height: 50px;
transition: height 0.3s linear, max-height 0s 0.3s linear;
max-height: 0px;
}
.collapsible {
transition: margin-bottom 0.3s cubic-bezier(0, 0, 0, 1);
margin-bottom: 0;
max-height: 1000000px;
}
.collapsible-wrapper.collapsed > .collapsible {
margin-bottom: -2000px;
transition: margin-bottom 0.3s cubic-bezier(1, 0, 1, 1),
visibility 0s 0.3s, max-height 0s 0.3s;
visibility: hidden;
max-height: 0;
}
.collapsible-wrapper.collapsed:after
{
height: 0;
transition: height 0.3s linear;
max-height: 50px;
}
/* END of the collapsible implementation; the stuff below
is just styling for this demo */
#container {
display: flex;
align-items: flex-start;
max-width: 1000px;
margin: 0 auto;
}
.menu {
border: 1px solid #ccc;
box-shadow: 0 1px 3px rgba(0,0,0,0.5);
margin: 20px;
}
.menu-item {
display: block;
background: linear-gradient(to bottom, #fff 0%,#eee 100%);
margin: 0;
padding: 1em;
line-height: 1.3;
}
.collapsible .menu-item {
border-left: 2px solid #888;
border-right: 2px solid #888;
background: linear-gradient(to bottom, #eee 0%,#ddd 100%);
}
.menu-item.toggler {
background: linear-gradient(to bottom, #aaa 0%,#888 100%);
color: white;
cursor: pointer;
}
.menu-item.toggler:before {
content: '';
display: block;
border-left: 8px solid white;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
width: 0;
height: 0;
float: right;
transition: transform 0.3s ease-out;
}
.menu-item.toggler.toggled:before {
transform: rotate(90deg);
}
body { font-family: sans-serif; font-size: 14px; }
*, *:after {
box-sizing: border-box;
}
На самом деле два переходов, связанных с этим. Один из них переводит margin-bottom
из 0px (в расширенном состоянии) в -2000px
в свернутом состоянии (аналогично этому ответу ). 2000 здесь - первое магическое число, оно основано на предположении, что ваша коробка не будет выше этой (2000 пикселей кажется разумным выбором).
Использование одного перехода margin-bottom
само по себе имеет две проблемы:
margin-bottom: -2000px
не будет скрывать все - там Будут видны вещи даже в свернутом корпусе. Это небольшое исправление, которое мы сделаем позже. Исправление этой второй проблемы - это то, где вступает второй переход, и этот переход концептуально нацеливается на минимальную высоту оболочки («концептуально», потому что мы на самом деле не используем свойство min-height
для это; об этом позже).
Вот анимация, которая показывает, как объединение перехода нижнего поля с переходом минимальной высоты, одинаковой продолжительности, дает нам комбинированный переход от полной высоты к нулевой высоте, которая имеет одинаковую длительность.
Левая полоса показывает, как отрицательное нижнее поле сдвигает нижнюю часть вверх, уменьшая видимую высоту. Средняя полоса показывает, как минимальная высота гарантирует, что в случае свертывания переход не заканчивается досрочно, а в случае растяжения переход не начинается поздно. Правая полоса показывает, как комбинация этих двух элементов приводит к тому, что окно переходит от полной высоты к нулевой высоте за правильное время.
Для моей демонстрации я установил 50px в качестве верхнего минимального значения высоты. Это второе магическое число, и оно должно быть ниже, чем высота коробки. 50px кажется разумным; кажется маловероятным, что вы очень часто захотите сделать разборный элемент, который даже не достигает 50 пикселей.
Как вы можете видеть на анимации, результирующий переход является непрерывным, но это не дифференцируемо - в момент, когда минимальная высота равна полной высоте, скорректированной по нижнему краю, происходит внезапное изменение скорости. Это очень заметно в анимации, потому что она использует линейную функцию синхронизации для обоих переходов, и потому что весь переход очень медленный. В реальном случае (моя демонстрация вверху) переход занимает всего 300 мс, а переход нижнего поля не является линейным. Я поиграл с множеством различных функций синхронизации для обоих переходов, и те, с которыми я закончил, чувствовали, что они лучше всего работают в самых разных случаях.
Осталось решить две проблемы:
Мы решаем первую проблему, задавая элемент контейнера max-height: 0
в свернутом случае с переходом 0s 0.3s
. Это означает, что на самом деле это не переход, но max-height
применяется с задержкой; он применяется только после завершения перехода. Чтобы это работало правильно, нам также нужно выбрать числовое значение max-height
для противоположного, не свернутого состояния. Но в отличие от случая 2000px, где выбор слишком большого числа влияет на качество перехода, в этом случае это действительно не имеет значения. Таким образом, мы можем просто выбрать число, которое настолько велико, что мы знаем , что никакая высота никогда не приблизится к этому. Я выбрал миллион пикселей. Если вам кажется, что вам может потребоваться поддержка содержимого высотой более миллиона пикселей, то 1) извините и 2) просто добавьте пару нулей.
Вторая проблема заключается в том, что мы фактически не используем min-height
для перехода на минимальную высоту. Вместо этого в контейнере есть ::after
псевдоэлемент с height
, который переходит от 50px к нулю. Это имеет тот же эффект, что и min-height
: он не позволит контейнеру сжиматься ниже той высоты, которую в настоящее время имеет псевдоэлемент. Но поскольку мы используем height
, а не min-height
, теперь мы можем использовать max-height
(еще раз примененный с задержкой), чтобы установить фактическую высоту псевдоэлемента равной нулю после завершения перехода, гарантируя, что по крайней мере вне перехода даже маленькие элементы имеют правильную высоту. Поскольку min-height
сильнее , чем max-height
, это не сработало бы, если бы мы использовали контейнер min-height
вместо псевдоэлемента height
. Как и max-height
в предыдущем абзаце, этому max-height
также необходимо значение для противоположного конца перехода. Но в этом случае мы можем просто выбрать 50px.
Протестировано в Chrome (Win, Mac, Android, iOS), Firefox (Win, Mac, Android), Edge, IE11 (за исключением проблемы макета flexbox с моей демонстрацией, которую я не удосужился отладить) и Safari ( Mac, iOS). Говоря о flexbox, должна быть возможность сделать это без использования flexbox; на самом деле я думаю, что вы можете заставить почти все работать в IE7 - ndash; за исключением того факта, что у вас не будет переходов CSS, что делает это довольно бессмысленным упражнением.
Хотя я бы рассматривал Selenium и Watin / Watir как ценные альтернативы, они довольно надежные решения для тестирования, я не думаю, что ни одно из них не позволит вам записывать .webtests, как это делает VisualStudio 2008 из коробка. Я считаю, что они записывают модульные тесты, и это нормально, если вы этого хотите. Единственный известный мне инструмент, который делает именно то, что вы просите, - это Fiddler.
http://www.fiddler2.com/fiddler2/
Roberto.-
Вы можете проверить Selenium на http://seleniumhq.org/ .
«Возможно, самый полный пакет из всех и поддерживает тестирование в IE, FireFox и Safari. Ваши модульные тесты написаны на java, поэтому вам просто нужно изучить API. У них также есть интересные варианты серверов, на которых вы можете запускать тесты на серверах. Вы даже можете записывать тесты с помощью надстройки FireFox ». ( источник )
Вы можете позже запускать тесты, созданные с помощью Firefox, например, как модульные тесты на C #.
Я не знаю ничего, что использует среду веб-тестирования визуальных студий, но, как указала Андреа, вы можете использовать селен. Я бы порекомендовал Selenium RC, потому что вы можете писать свои тесты на любом языке и на любом фреймворке, если есть поддержка HTTP-соединений. Я использую rc для написания тестов на C # с помощью NUnit, но вы можете использовать любой vb, ironpython, управляемый c ++, f # и т. Д. И среду тестирования Microsoft. Selenium IDE - это расширение браузера Firefox (версия IE пока недоступна), но селен работает в большинстве веб-браузеров, включая IE, FF, Safari и Opera.
Другие варианты могут включать WatiN, который похож на селен. Обе платформы поддерживают подход к тестированию функциональности. Для модульных тестов вы можете взглянуть на NunitAsp.
You can use something like selenium, watir, webrat, etc. Here is an article from Scott Hanselman that describes integrating watir into an NUnit assertion:
http://www.hanselman.com/blog/IntegratingRubyAndWatirWithNUnit.aspx
It's actually a great example that can be used to tie an external testing framework into the MS Test framework as well. This is a project where a small amount of effort to create an assertion that reads the external test framework output, but it's not difficult. We are using this at work now with watir and possibly soon with a combination of webrat and mechanize.
Watir does have a recorder available, check out OpenQA: http://watir-recorder.openqa.org/
Fiddler2 позволяет пользователям записывать свой сеанс браузера как веб-тест Visual Studio .
Это позволило бы людям создавать базовые тесты. Однако разработка хорошего веб-теста обычно включает в себя закодированный веб-тест, который не так хорош без тестовой версии Visual Studio.
Я бы определенно порекомендовал другой инструмент для этой цели. Microsoft VSTS WebTest разработан для тестирования производительности и не является хорошим инструментом для функционального тестирования.
В большинстве случаев WebTest должен быть коррелирован, что обеспечит поддержку сеанса HTTP и других динамических значений. Вы можете следовать этому руководству , если вам все еще интересно.
Думаю, лучшим вариантом для вашей команды будет использование Selenium с простой записью и воспроизведением. По моему опыту, бизнес-пользователи не обладают достаточными техническими знаниями, чтобы справляться со сценариями.
Вы можете получить дополнительное преимущество, имея возможность воспроизводить сценарий в большем количестве браузеров (по сравнению с Selenium), если вы решите использовать WARIT, но он имеет другие проблемы и также не будет подходящим инструментом для бизнес-пользователей.
Спасибо, Мацей